/**
 * Drawer (offcanvas) — Geist-inspired feedback component.
 *
 * Adapted from https://github.com/geist-org/geist-ui/tree/master/components/drawer
 *   - rounded panel (radius removed on the entry edge)
 *   - shadow-large elevation
 *   - smooth cubic-bezier slide + opacity transition (400ms in / 400ms out)
 *   - portalOpacity backdrop with separate easing curve
 *   - placements: top | right (default) | bottom | left
 *
 * Reused for: sidebar, mini-cart, account, future filter/menu drawers.
 */

@layer components {

	/* --- Panel base --- */

	.st-offcanvas {
		position: fixed;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		max-inline-size: 100%;
		background: var(--st-bg);
		color: var(--st-text);
		border-radius: 18px;
		box-shadow: 0 30px 60px rgb(0 0 0 / 0.12);
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		z-index: 1050;
		/* Leave — Geist's CssTransition uses cubic-bezier(0.1, 0.2, 0.1, 1) on `.wrapper-leave`.
		   60ms delay matches the React enterTime/leaveTime pause before the active class lands. */
		transition:
			opacity 400ms cubic-bezier(0.1, 0.2, 0.1, 1) 60ms,
			transform 400ms cubic-bezier(0.1, 0.2, 0.1, 1) 60ms,
			visibility 0s linear 460ms;
	}

	.st-offcanvas[data-st-open="true"] {
		opacity: 1;
		visibility: visible;
		transform: translate3d(0, 0, 0);
		/* Enter — Geist's `.wrapper` base transition uses cubic-bezier(0.1, 0.6, 0.1, 1).
		   60ms delay = React mount → enterTime pause before `.wrapper-enter-active` swap. */
		transition:
			opacity 400ms cubic-bezier(0.1, 0.6, 0.1, 1) 60ms,
			transform 400ms cubic-bezier(0.1, 0.6, 0.1, 1) 60ms,
			visibility 0s linear 0s;
	}

	/* --- Placements (explicit modifier required: --end | --start | --top | --bottom) --- */

	.st-offcanvas--end {
		inset-block: 0;
		inset-inline-end: 0;
		inline-size: min(420px, 100vw);
		block-size: 100%;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		transform: translate3d(100%, 0, 0);
	}

	.st-offcanvas--start {
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: min(420px, 100vw);
		block-size: 100%;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		transform: translate3d(-100%, 0, 0);
	}

	.st-offcanvas--top {
		inset-inline: 0;
		inset-block-start: 0;
		inline-size: 100%;
		block-size: auto;
		max-block-size: 90vh;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		transform: translate3d(0, -100%, 0);
	}

	.st-offcanvas--bottom {
		inset-inline: 0;
		inset-block-end: 0;
		inline-size: 100%;
		block-size: auto;
		max-block-size: 90vh;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		transform: translate3d(0, 100%, 0);
	}

	/* --- Inner structure --- */

	.st-offcanvas__header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem;
		padding: 1.3125rem 1.3125rem 1rem;
		border-block-end: 1px solid var(--st-border);
	}

	.st-offcanvas__title {
		margin: 0;
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: -0.01em;
	}

	.st-offcanvas__subtitle {
		margin: 0.25rem 0 0;
		font-size: 0.875rem;
		color: var(--st-text-muted);
	}

	.st-offcanvas__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 32px;
		block-size: 32px;
		margin-block-start: -4px;
		margin-inline-end: -4px;
		border-radius: 8px;
		color: inherit;
		transition: background 120ms, color 120ms;
	}

	.st-offcanvas__close:hover {
		background: var(--st-bg-subtle);
		color: var(--st-text);
	}

	.st-offcanvas__body {
		flex: 1;
		overflow-y: auto;
		padding: 1.3125rem;
	}

	.st-offcanvas__body--flush {
		padding: 0;
	}

	.st-offcanvas__footer {
		padding: 1rem 1.3125rem;
		border-block-start: 1px solid var(--st-border);
	}

	/* --- Backdrop --- */

	.st-offcanvas-backdrop {
		position: fixed;
		inset: 0;
		background: #000;
		opacity: 0;
		visibility: hidden;
		z-index: 1040;
		pointer-events: none;
		/* Leave — Geist's `.layer` transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) + 60ms init pause */
		transition:
			opacity 350ms cubic-bezier(0.4, 0, 0.2, 1) 60ms,
			visibility 0s linear 410ms;
	}

	.st-offcanvas-backdrop[data-st-open="true"] {
		opacity: 0.5;
		visibility: visible;
		pointer-events: auto;
		transition:
			opacity 350ms cubic-bezier(0.4, 0, 0.2, 1) 60ms,
			visibility 0s linear 0s;
	}

	/* --- Body lock when any drawer is open --- */

	body[data-st-offcanvas-open] {
		overflow: hidden;
	}

	/* --- Widget styling for sidebar contents --- */

	.st-widget + .st-widget {
		margin-block-start: 1.5rem;
	}

	.st-widget__title {
		margin: 0 0 0.5rem;
		font-size: 0.875rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--st-text-muted);
	}
}