/* Logo row: the <img> only sizes the item (invisible); the mask paints the logo in currentColor. */

.logo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--logo-row-gap, var(--system-spacing-gap-sm));
}

.logo-row__item {
	display: block;
	height: var(--logo-row-height, 20px);
	background-color: currentColor;
	mask: var(--logo) center / contain no-repeat;

	& img {
		display: block;
		width: auto;
		height: 100%;
		opacity: 0;
	}
}