/*!
 * @be-partner-labs/ds v1.8.0 — components/dropdown
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/components/dropdown.min.css">
 * npm:  @import "@be-partner-labs/ds/components/dropdown";
 * Docs: https://ds.bepartnerlabs.com/components/dropdown/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --dropdown-background:        background (default: --bp-color-bg-elevated)
	 * --dropdown-border:    border (default: 1px solid --bp-color-border)
	 * --dropdown-radius:    border radius (default: --bp-radius-lg)
	 * --dropdown-shadow:    box shadow (default: --bp-shadow-lg)
	 * --dropdown-min-width: minimum width (default: 12rem)
	 * --dropdown-item-gap:  padding on items (default: --bp-space-2 --bp-space-3)
	 */

	/* ─── Wrapper ────────────────────────────────────────────── */
	.bp-dropdown {
		--_background: var(--dropdown-background, var(--bp-color-bg-elevated));
		--_border: var(--dropdown-border, 1px solid var(--bp-color-border));
		--_radius: var(--dropdown-radius, var(--bp-radius-lg));
		--_shadow: var(--dropdown-shadow, var(--bp-shadow-lg));
		--_min-width: var(--dropdown-min-width, 12rem);
		--_item-gap: var(--dropdown-item-gap, var(--bp-space-2) var(--bp-space-3));

		position: relative;
		display: inline-flex;
	}

	/* ─── Panel (popover) ────────────────────────────────────── */
	.bp-dropdown__panel {
		/* Reset browser popover styles */
		position: absolute;
		top: calc(100% + var(--bp-space-1));
		inset-inline-start: 0;
		z-index: 200;

		min-width: var(--_min-width);
		background-color: var(--_background);
		border: var(--_border);
		border-radius: var(--_radius);
		box-shadow: var(--_shadow);
		padding-block: var(--bp-space-1);
		list-style: none;
		margin: 0;
		padding-inline: 0;

		opacity: 0;
		visibility: hidden;
		translate: 0 -0.25rem;
		transition:
			opacity var(--bp-duration-fast) var(--bp-ease),
			translate var(--bp-duration-fast) var(--bp-ease),
			visibility 0s var(--bp-duration-fast);
	}

	/* ─── Open state (driven by [data-open] on wrapper) ─────── */
	.bp-dropdown[data-open] .bp-dropdown__panel {
		opacity: 1;
		visibility: visible;
		translate: 0 0;
		transition:
			opacity var(--bp-duration-fast) var(--bp-ease),
			translate var(--bp-duration-fast) var(--bp-ease),
			visibility 0s 0s;
	}

	/* ─── Popover API variant ────────────────────────────────── */
	.bp-dropdown__panel[popover] {
		position: fixed;
		inset: unset;
		padding-block: var(--bp-space-1);
		padding-inline: 0;
		color: var(--bp-color-text);

		opacity: 0;
		translate: 0 -0.25rem;
		transition:
			opacity var(--bp-duration-fast) var(--bp-ease),
			translate var(--bp-duration-fast) var(--bp-ease),
			display var(--bp-duration-fast) var(--bp-ease) allow-discrete,
			overlay var(--bp-duration-fast) var(--bp-ease) allow-discrete;
	}

	.bp-dropdown__panel[popover]:popover-open {
		opacity: 1;
		translate: 0 0;
	}

	@starting-style {
		.bp-dropdown__panel[popover]:popover-open {
			opacity: 0;
			translate: 0 -0.25rem;
		}
	}

	/* ─── Items ──────────────────────────────────────────────── */
	.bp-dropdown__item {
		display: flex;
		align-items: center;
		gap: var(--bp-space-2);
		width: 100%;
		padding: var(--_item-gap);
		background: none;
		border: none;
		border-radius: 0;
		color: var(--bp-color-text);
		font-size: var(--bp-text-sm);
		text-align: start;
		text-decoration: none;
		cursor: pointer;
		white-space: nowrap;
		transition: background-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-dropdown__item:hover,
	.bp-dropdown__item:focus-visible {
		background-color: var(--bp-color-bg-subtle);
		outline: none;
	}

	.bp-dropdown__item:focus-visible {
		outline: 2px solid var(--bp-primary);
		outline-offset: -2px;
	}

	.bp-dropdown__item[aria-disabled="true"],
	.bp-dropdown__item:disabled {
		opacity: 0.4;
		pointer-events: none;
		cursor: default;
	}

	/* ─── Danger variant ─────────────────────────────────────── */
	.bp-dropdown__item--danger {
		color: var(--bp-color-error);
	}

	.bp-dropdown__item--danger:hover,
	.bp-dropdown__item--danger:focus-visible {
		background-color: color-mix(in srgb, var(--bp-color-error) 10%, transparent);
	}

	/* ─── Separator ──────────────────────────────────────────── */
	.bp-dropdown__separator {
		height: 1px;
		background-color: var(--bp-color-border);
		margin-block: var(--bp-space-1);
		margin-inline: var(--bp-space-2);
	}

	/* ─── Item icon ──────────────────────────────────────────── */
	.bp-dropdown__icon {
		width: 1em;
		height: 1em;
		flex-shrink: 0;
		opacity: 0.7;
	}

	/* ─── Reduced motion ─────────────────────────────────────── */
	@media (prefers-reduced-motion: reduce) {
		.bp-dropdown__panel,
		.bp-dropdown__panel[popover] {
			transition: none;
		}
	}
}