/* Hallmark · component: select · genre: modern-minimal · tone: restrained · palette: semantic-neutral · fingerprint: anchored-listbox/mobile-sheet · pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: pass (46–50) · slop: pass */
@layer theme, base, components, utilities;

@layer components {
	.ml-select {
		--ml-select-trigger-height: var(--ml-space-9);
		--ml-select-trigger-padding-x: var(--ml-space-4);
		--ml-select-trigger-gap: var(--ml-space-2);
		--ml-select-trigger-text: var(--text-sm);
		--ml-select-caret-size: var(--ml-space-4);
		--ml-select-check-size: var(--ml-space-4);
		--ml-select-content-radius: var(--radius-md);
		--ml-select-sheet-radius: var(--radius-xl);
		--ml-select-content-shadow: var(--shadow-md);
		--ml-select-sheet-shadow: var(--shadow-xl);
	}

	.ml-select[data-size="sm"] {
		--ml-select-trigger-height: var(--ml-space-8);
		--ml-select-trigger-padding-x: var(--ml-space-3);
		--ml-select-trigger-gap: var(--ml-space-1-5);
		--ml-select-trigger-text: var(--text-xs);
		--ml-select-caret-size: var(--ml-space-3);
		--ml-select-check-size: var(--ml-space-3);
	}

	.ml-select[data-size="lg"] {
		--ml-select-trigger-height: var(--ml-space-10);
		--ml-select-trigger-padding-x: var(--ml-space-5);
		--ml-select-trigger-text: var(--text-base);
		--ml-select-caret-size: var(--ml-space-4);
		--ml-select-check-size: var(--ml-space-5);
	}

	.ml-select__trigger {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ml-select-trigger-gap);
		block-size: var(--ml-select-trigger-height);
		max-inline-size: 100%;
		padding-inline: var(--ml-select-trigger-padding-x);
		border-color: var(--border);
		background: var(--surface);
		color: var(--text);
		font-size: var(--ml-select-trigger-text);
		border-radius: var(--radius-md);
		line-height: 1;
		box-shadow: var(--shadow-xs);
		cursor: pointer;
		transition:
			background-color var(--duration-micro) var(--ease-out),
			border-color var(--duration-micro) var(--ease-out),
			color var(--duration-micro) var(--ease-out);
	}

	.ml-select[data-open="true"] .ml-select__trigger {
		border-color: var(--border-strong);
		background: var(--surface-2);
	}

	.ml-select[data-variant="ghost"] .ml-select__trigger {
		border-color: transparent;
		background: transparent;
		box-shadow: none;
	}

	@media (hover: hover) {
		.ml-select__trigger:not(:disabled):hover {
			border-color: var(--border-strong);
			background: var(--surface-2);
		}

		.ml-select[data-variant="ghost"] .ml-select__trigger:not(:disabled):hover {
			border-color: transparent;
			background: var(--surface-2);
		}
	}

	.ml-select__trigger:focus-visible {
		border-color: var(--border-strong);
		box-shadow: var(--focus-ring);
	}

	.ml-select__trigger:not(:disabled):active {
		background: var(--surface-3);
	}

	.ml-select__trigger:disabled {
		cursor: not-allowed;
		opacity: 0.48;
	}

	.ml-select__trigger[aria-invalid="true"] {
		border-color: var(--destructive);
	}

	.ml-select__trigger-copy {
		display: inline-flex;
		min-inline-size: 0;
		flex: 0 1 auto;
		align-items: center;
		gap: var(--ml-select-trigger-gap);
		line-height: 1;
	}

	.ml-select__label {
		color: var(--text-muted);
	}

	.ml-select__caret {
		display: inline-block;
		inline-size: var(--ml-select-caret-size);
		block-size: var(--ml-select-caret-size);
		flex: 0 0 auto;
		color: var(--text-muted);
		transform: rotate(0deg);
		transform-origin: center;
		transition:
			transform var(--duration-short) var(--ease-out-expo),
			color var(--duration-micro) var(--ease-out);
	}

	.ml-select__caret[data-open="true"] {
		transform: rotate(180deg);
	}

	.ml-select__trigger:hover .ml-select__caret,
	.ml-select__trigger[aria-expanded="true"] .ml-select__caret {
		color: currentcolor;
	}

	.ml-select__content {
		--ml-select-check-size: var(--ml-space-4);
		--ml-select-content-radius: var(--radius-md);
		--ml-select-content-shadow: var(--shadow-md);

		z-index: var(--z-dropdown);
		width: max-content;
		min-inline-size: var(--radix-popover-trigger-width);
		max-width: min(22rem, calc(100vw - var(--ml-space-8)));
		max-block-size: var(--radix-popover-content-available-height);
		overflow: hidden;
		overscroll-behavior: contain;
		border: var(--border-thin) solid var(--border);
		border-radius: var(--ml-select-content-radius);
		background: var(--popover);
		color: var(--popover-foreground);
		box-shadow: var(--ml-select-content-shadow);
		transform-origin: var(--radix-popover-content-transform-origin);
		animation: ml-floating-enter var(--duration-fast) var(--ease-out-expo) both;
	}

	.ml-select__content[data-side="top"] {
		animation-name: ml-floating-slide-top-enter;
	}

	.ml-select__content[data-side="bottom"] {
		animation-name: ml-floating-slide-bottom-enter;
	}

	.ml-select__content[data-side="left"] {
		animation-name: ml-floating-slide-left-enter;
	}

	.ml-select__content[data-side="right"] {
		animation-name: ml-floating-slide-right-enter;
	}

	.ml-select__content[data-state="closed"] {
		animation: ml-floating-exit var(--duration-micro) var(--ease-in) both;
	}

	.ml-select__content[data-state="closed"][data-side="top"] {
		animation-name: ml-floating-slide-top-exit;
	}

	.ml-select__content[data-state="closed"][data-side="bottom"] {
		animation-name: ml-floating-slide-bottom-exit;
	}

	.ml-select__content[data-state="closed"][data-side="left"] {
		animation-name: ml-floating-slide-left-exit;
	}

	.ml-select__content[data-state="closed"][data-side="right"] {
		animation-name: ml-floating-slide-right-exit;
	}

	.ml-select__list {
		display: flex;
		flex-direction: column;
		gap: var(--ml-space-0-5);
		max-block-size: inherit;
		padding: var(--ml-space-1);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.ml-select__mobile-layer {
		isolation: isolate;
	}

	.ml-select__backdrop {
		z-index: var(--z-modal);
		background: color-mix(in oklch, var(--background) 42%, transparent);
		animation: ml-select-backdrop-enter var(--duration-fast) var(--ease-out);
	}

	.ml-select__sheet-stack {
		display: grid;
		grid-template-rows: minmax(0, 1fr) auto;
		gap: var(--ml-space-2);
		max-block-size: calc(100dvh - var(--ml-space-6));
	}

	.ml-select__sheet {
		--ml-select-check-size: var(--ml-space-4);
		--ml-select-sheet-radius: var(--radius-xl);
		--ml-select-sheet-shadow: var(--shadow-xl);

		display: flex;
		flex-direction: column;
		min-block-size: 0;
		max-block-size: min(78dvh, 36rem);
		overflow: hidden;
		border: var(--border-thin) solid var(--border);
		border-radius: var(--ml-select-sheet-radius);
		background: var(--popover);
		color: var(--popover-foreground);
		box-shadow: var(--ml-select-sheet-shadow);
		animation: ml-select-sheet-enter var(--duration-short) var(--ease-out-expo);
	}

	.ml-select__sheet-handle-wrap {
		display: flex;
		justify-content: center;
		padding-block-start: var(--ml-space-3);
	}

	.ml-select__sheet-handle {
		inline-size: var(--ml-space-10);
		block-size: var(--ml-space-1);
		border-radius: var(--radius-pill);
		background: var(--border);
	}

	.ml-select__sheet-label {
		padding: var(--ml-space-4) var(--ml-space-5) var(--ml-space-3);
		color: var(--text);
		font-size: var(--text-sm);
		font-weight: 600;
	}

	.ml-select__sheet .ml-select__list {
		min-block-size: 0;
		flex: 1 1 auto;
		gap: 0;
		padding: 0 var(--ml-space-3) var(--ml-space-3);
		overflow-y: auto;
	}

	.ml-select__sheet-cancel {
		display: flex;
		min-height: var(--ml-space-12);
		width: 100%;
		align-items: center;
		justify-content: center;
		border: var(--border-thin) solid var(--border);
		border-radius: var(--radius-lg);
		background: var(--popover);
		color: var(--text);
		font-size: var(--text-sm);
		font-weight: 600;
		box-shadow: var(--shadow-md);
		transition:
			background-color var(--duration-micro) var(--ease-out),
			border-color var(--duration-micro) var(--ease-out),
			color var(--duration-micro) var(--ease-out);
	}

	@media (hover: hover) {
		.ml-select__sheet-cancel:hover {
			border-color: var(--border-strong);
			background: var(--surface-2);
		}
	}

	.ml-select__sheet-cancel:active {
		background: var(--surface-3);
	}

	.ml-select__sheet-cancel:focus-visible {
		outline: none;
		box-shadow: var(--focus-ring);
	}

	.ml-select__item {
		gap: var(--ml-space-3);
		border: 0;
		background: transparent;
		color: var(--text-body);
		transition:
			background-color var(--duration-micro) var(--ease-out),
			color var(--duration-micro) var(--ease-out);
	}

	@media (hover: hover) {
		.ml-select__item:hover {
			background: var(--surface-2);
			color: var(--text);
		}
	}

	.ml-select__item:active {
		background: var(--surface-3);
	}

	.ml-select__item[data-selected="true"] {
		background: var(--surface-2);
		color: var(--text);
		font-weight: 500;
	}

	.ml-select__item[data-mobile="true"] {
		min-block-size: var(--ml-space-12);
		border-radius: 0;
		border-block-end: var(--border-thin) solid var(--border);
		background: transparent;
	}

	.ml-select__item[data-mobile="true"][data-selected="true"] {
		background: var(--surface-2);
	}

	.ml-select__item[data-mobile="true"]:first-child {
		border-start-start-radius: var(--radius-lg);
		border-start-end-radius: var(--radius-lg);
	}

	.ml-select__item[data-mobile="true"]:last-child {
		border-block-end: 0;
		border-end-start-radius: var(--radius-lg);
		border-end-end-radius: var(--radius-lg);
	}

	.ml-select__item:focus-visible {
		outline: none;
		box-shadow: var(--focus-ring);
	}

	.ml-select__check {
		margin-block-start: 0;
		inline-size: var(--ml-select-check-size);
		block-size: var(--ml-select-check-size);
		color: var(--text);
	}

	.ml-select__content[data-size="sm"],
	.ml-select__sheet[data-size="sm"] {
		--ml-select-check-size: var(--ml-space-3);
	}

	.ml-select__content[data-size="lg"],
	.ml-select__sheet[data-size="lg"] {
		--ml-select-check-size: var(--ml-space-5);
	}

	@keyframes ml-select-sheet-enter {
		from {
			opacity: 0;
			transform: translate3d(0, 8px, 0);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes ml-select-backdrop-enter {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
}