/* LangSwitch — extraído de src/lib/components/LangSwitch.svelte.
   Scopeado con anidamiento nativo bajo su raíz para evitar colisiones
   de nombres de clase al pasar de CSS scoped de Svelte a CSS global. */

.lang {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--sans);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--track-caps-md);

	.opt {
		background: none;
		border: none;
		cursor: pointer;
		padding: 4px 2px;
		color: var(--fg);
		opacity: 0.5;
		transition: opacity 0.3s;
		font: inherit;
		letter-spacing: inherit;
	}

	.opt:hover {
		opacity: 0.85;
	}

	.opt.active {
		opacity: 1;
		text-decoration: underline;
		text-underline-offset: 4px;
		text-decoration-thickness: 1.5px;
	}

	.sep {
		opacity: 0.4;
		color: var(--fg);
	}
}