/*
 * c-panel — lo mínimo para los tres modos (js/c-panel.js). El modo lo elige
 * el theme con --mode en el panel; lo visual lo pone cada theme.
 *
 *   .c-panel { --mode: inline; }                               por defecto
 *   @media (width < 48rem) { .c-panel { --mode: drawer; } }    ejemplo
 *
 * Lado del cajón: data-side="start" en el panel (por defecto, a la derecha).
 */
@layer components {
	.c-panel { --mode: inline; padding: 0; border: 0; }

	/* inline: sin caja propia; sus hijos se ubican como si el <dialog> no estuviera */
	.c-panel[data-mode="inline"][open] { display: contents; }
	[data-js="panel"][data-mode="inline"],
	.c-panel[data-mode="inline"] [data-js="panel-close"],
	.c-panel[data-mode="inline"] .c-panel__header--controls { display: none; }

	/* Modos por defecto de los paneles de la base; un theme los cambia en su CSS.
	   Buscador del header: modal. Menú principal: en su lugar, y cajón en
	   pantallas angostas. */
	.c-panel--search { --mode: modal; }
	@media (width < 48rem) { .c-topmenu__panel { --mode: drawer; } }

	/* drawer y modal */
	.c-panel:modal {
		overflow: auto;
		padding: var(--space-m, 1.5rem);
		background: var(--color-surface, Canvas);
		color: var(--color-fg, CanvasText);
	}
	.c-panel::backdrop { background: var(--color-backdrop, rgb(0 0 0 / 0.5)); }
	html:has(.c-panel:modal) { overflow: hidden; }

	.c-panel[data-mode="modal"]:modal {
		margin: auto;
		max-inline-size: min(40rem, 100vw - 2rem);
		max-block-size: calc(100dvh - 2rem);
	}
	.c-panel[data-mode="drawer"]:modal {
		margin: 0;
		inset-block: 0;
		inset-inline: auto 0;
		inline-size: min(24rem, 100vw - 3rem);
		block-size: 100dvh;
		max-block-size: none;
	}
	.c-panel[data-mode="drawer"][data-side="start"]:modal { inset-inline: 0 auto; }

	.c-panel__header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-s, 1rem);
	}

	@media (prefers-reduced-motion: no-preference) {
		.c-panel[data-mode="drawer"]:modal { transition: translate var(--duration, 0.25s) var(--easing, ease); }
		@starting-style { .c-panel[data-mode="drawer"]:modal { translate: 100% 0; } }
		@starting-style { .c-panel[data-mode="drawer"][data-side="start"]:modal { translate: -100% 0; } }
	}
}