/*
 * c-dropdown — lo mínimo para que funcione: el menú flota sobre el contenido
 * debajo del botón. Colores de sistema (Canvas/CanvasText) para que se lea sin
 * estilos de theme. Lo visual (bordes, sombras, espaciado) lo pone cada theme.
 * JS: js/c-dropdown.js
 */
@layer components {
	.c-dropdown {
		position: relative;
	}
	.c-dropdown__menu {
		position: absolute;
		z-index: var(--z-dropdown, 1000);
		inset-block-start: 100%;
		inset-inline-start: 0;
		min-inline-size: max-content;
		background: var(--color-surface, Canvas);
		color: var(--color-fg, CanvasText);
	}
	.c-dropdown__menu--end {
		inset-inline-start: auto;
		inset-inline-end: 0;
	}
}

/* castillo: menú con borde fino y sombra suave; ítem activo marcado con el punto dorado */
@layer components {
	.c-dropdown__menu:not([data-state="closed"]) { display: grid; }
	.c-dropdown__menu {
		min-inline-size: 12rem;
		padding-block: var(--space-3xs);
		border: 1px solid var(--color-border);
		box-shadow: 0 0.75rem 2rem -1rem rgb(0 0 0 / 0.3);
		font-size: var(--step--1);
	}
	.c-dropdown__item {
		display: flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.5em 1em;
		color: var(--color-fg);
		text-decoration: none;
	}
	.c-dropdown__item:hover { background: var(--color-soft); }
	.c-dropdown__item.active { font-weight: 600; }
	.c-dropdown__item.active::after {
		content: "";
		inline-size: 0.35em;
		aspect-ratio: 1;
		margin-inline-start: auto;
		border-radius: 50%;
		background: var(--color-accent);
	}
	.c-dropdown__toggle::after {
		content: "";
		display: inline-block;
		inline-size: 0.4em;
		aspect-ratio: 1;
		margin-inline-start: 0.6em;
		border-inline-end: 1.5px solid currentColor;
		border-block-end: 1.5px solid currentColor;
		rotate: 45deg;
		translate: 0 -0.2em;
	}
	.c-dropdown__toggle[aria-expanded="true"]::after { rotate: -135deg; translate: 0 0.1em; }
}