/*
 * Partial: language-switcher (in the site header bar, next to the burger on mobile; loaded in <head>, see Assets::CRITICAL).
 * Without JS the <details> opens and closes instantly. LanguageSwitcher (global.js) adds --animated
 * and toggles --open, so the panel unfolds and folds back before the <details> really closes.
 */
.sw-language-switcher {
	--switcher-ease: cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	z-index: 2; /* above the open mobile menu panel, like the logo and burger */
	font-family: var(--font-heading);
	font-size: var(--text-small);
	line-height: var(--leading-body);
	letter-spacing: var(--tracking-label);
}

.sw-language-switcher__current {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding-block: var(--space-4);
	padding-inline: var(--space-16) var(--space-8);
	border: var(--border);
	color: var(--color-heading);
	list-style: none;
	cursor: pointer;
	clip-path: polygon(var(--cut-s) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-s));
	transition: border-color var(--transition), background-color var(--transition);
}
.sw-language-switcher__current::-webkit-details-marker { display: none; }
.sw-language-switcher__current:hover,
.sw-language-switcher--open .sw-language-switcher__current { border-color: var(--color-primary); }
.sw-language-switcher--open .sw-language-switcher__current { background: var(--color-bg-alt); }

.sw-language-switcher__icon {
	inline-size: var(--space-16);
	block-size: auto;
	padding-inline: var(--space-4);
	color: var(--color-primary);
	transition: transform 300ms var(--switcher-ease);
}
.sw-language-switcher[open]:not(.sw-language-switcher--animated) .sw-language-switcher__icon,
.sw-language-switcher--open .sw-language-switcher__icon { transform: rotate(180deg); }

/* Panel */
.sw-language-switcher__list {
	position: absolute;
	inset-block-start: calc(100% + var(--space-8));
	inset-inline: auto 0; /* right edge of the trigger */
	z-index: 1;
	display: grid;
	min-inline-size: 12rem;
	margin: 0;
	padding: var(--space-8);
	list-style: none;
	border: var(--border);
	background: var(--color-bg-alt);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%);
}

.sw-language-switcher--animated .sw-language-switcher__list {
	opacity: 0;
	transform: translateY(calc(-1 * var(--space-8)));
	clip-path: polygon(0 0, 100% 0, 100% 0, 100% 0, 0 0);
	transition:
		opacity 200ms ease,
		transform 250ms var(--switcher-ease),
		clip-path 250ms var(--switcher-ease);
}
.sw-language-switcher--open .sw-language-switcher__list {
	opacity: 1;
	transform: none;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%);
	transition-duration: 200ms, 400ms, 400ms;
}

/* Items slide in one after another */
.sw-language-switcher--animated .sw-language-switcher__item {
	opacity: 0;
	transform: translateX(calc(-1 * var(--space-8)));
	transition: opacity 150ms ease, transform 150ms ease;
}
.sw-language-switcher--open .sw-language-switcher__item {
	opacity: 1;
	transform: none;
	transition: opacity 300ms ease-out, transform 400ms var(--switcher-ease);
}
.sw-language-switcher--open .sw-language-switcher__item:nth-child(1) { transition-delay: 80ms; }
.sw-language-switcher--open .sw-language-switcher__item:nth-child(2) { transition-delay: 140ms; }
.sw-language-switcher--open .sw-language-switcher__item:nth-child(n + 3) { transition-delay: 200ms; }

.sw-language-switcher__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-16);
	padding-block: var(--space-8);
	padding-inline: var(--space-16);
	color: var(--color-heading);
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition);
}
.sw-language-switcher__link::before {
	content: "";
	position: absolute;
	inset-block: var(--space-8);
	inset-inline-start: 0;
	inline-size: 2px;
	background: var(--color-primary);
	transform: scaleY(0);
	transition: transform 300ms var(--switcher-ease);
}
.sw-language-switcher__link:hover { background: var(--color-bg); }
.sw-language-switcher__link--current { color: var(--color-primary); }
.sw-language-switcher__link--current::before,
.sw-language-switcher__link:hover::before { transform: none; }

.sw-language-switcher__name {
	margin-inline-start: auto;
	font-family: var(--font-body);
	letter-spacing: 0;
	color: var(--color-text);
}


@media (prefers-reduced-motion: reduce) {
	.sw-language-switcher *,
	.sw-language-switcher *::before { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}