/*
 * The FI / EN language switcher in the top bar
 * (app/helpers/language-switcher.php). Loaded only while the switcher is
 * enabled, so turning it off removes this too.
 */

/* At the right edge of the top bar, at every width. */
.navbar--has-lang .c-lang-switch {
	flex: none;
	margin: 4px 0 4px auto;
}

/* Below lg the account block is a full-width row: make it share the row. */
@media (max-width: 991.98px) {
	.navbar--has-lang .navbar--account {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
}

/* From xxl the top menu is back on the left. The account link stays at the
   right, beside the switcher, as it is without one. */
@media (min-width: 1450px) {
	.navbar--has-lang .navbar--account {
		margin-left: auto;
	}

	/* The theme pulls the account link 1rem into the bar's padding, which
	   suits it as the last item. Here the switcher follows it. */
	.navbar--has-lang .nav--account .nav-link:last-child {
		margin-right: 0;
	}

	.navbar--has-lang .c-lang-switch {
		margin-left: 0.75rem;
	}
}

.c-lang-switch__list {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-lang-switch__item {
	margin: 0;
}

.c-lang-switch .c-lang-switch__option {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px 4px 6px;
	border-radius: 3px;
	color: rgba(255, 255, 255, 0.64);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 16px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86), color 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.c-lang-switch a.c-lang-switch__option:hover,
.c-lang-switch a.c-lang-switch__option:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	text-decoration: none;
}

.c-lang-switch a.c-lang-switch__option:focus-visible {
	outline: 2px solid #4bdcdc;
	outline-offset: 1px;
}

.c-lang-switch .c-lang-switch__option.is-active {
	color: #fff;
	background: rgba(255, 255, 255, 0.13);
	cursor: default;
}

/* 3:2, slightly rounded. The SVGs are cropped to the same ratio. */
.c-lang-switch__flag {
	display: block;
	flex: none;
	width: 21px;
	height: 14px;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
	opacity: 0.75;
	transition: opacity 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.c-lang-switch__option.is-active .c-lang-switch__flag,
.c-lang-switch a.c-lang-switch__option:hover .c-lang-switch__flag,
.c-lang-switch a.c-lang-switch__option:focus-visible .c-lang-switch__flag {
	opacity: 1;
}

.c-lang-switch__flag svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.c-lang-switch .c-lang-switch__option,
	.c-lang-switch__flag {
		transition: none;
	}
}