/*
 * Language switcher.
 *
 * The dropdown mechanics - positioning, open/close, the rotating arrow, the
 * mobile accordion - come from the header's existing `.menu-item.has-dropdown`
 * styles. Only the flag needs anything of its own.
 */

.yld-lang__current,
.yld-lang__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.yld-lang__flag {
	width: 24px;
	height: 18px;
	flex: 0 0 auto;
	border-radius: 2px;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.yld-lang__label {
	white-space: nowrap;
}

/*
 * The nav's dropdowns are sized for menu labels (min-width: 310px). Language
 * names are short, so this one shrinks to its content instead.
 */
@media (min-width: 992px) {
	#main-nav .menu-item.has-dropdown > .brxe-dropdown.yld-lang__list {
		width: auto;
		min-width: max-content;
	}
}

/* Inside the burger menu the nav pads each row by --space-m; that is a lot of
   air for three one-word rows. */
@media (max-width: 991px) {
	#main-nav .menu-item.has-dropdown > .brxe-dropdown.yld-lang__list a {
		padding-block: var(--space-xs);
	}
}