@layer components {
    .select {
        --_c: var(--select-color, var(--form-color, var(--color-text)));
        --_focus: var(--select-focus-color, var(--form-focus-color, var(--color-primary)));
        --_border-color: var(--select-border-color, var(--form-border-color, var(--color-border)));
        --_border-width: var(--select-border-width, var(--form-border-width, 2px));
        --_bordered-border-width: var(--select-bordered-border-width, var(--form-bordered-border-width, 1px));
        --_border-opacity: var(--select-border-opacity, var(--form-border-opacity, 0.3));
        --_icon-opacity: var(--select-icon-opacity, var(--form-icon-opacity, 0.5));
        --_speed: var(--select-speed, var(--form-speed, var(--transition-speed)));
        --_fr-color: var(--select-focus-ring-color, var(--form-focus-ring-color, var(--color-border)));
        --_fr-width: var(--select-focus-ring-width, var(--form-focus-ring-width, 2px));
        --_fr-offset: var(--select-focus-ring-offset, var(--form-focus-ring-offset, 2px));
        --_fr-style: var(--select-focus-ring-style, var(--form-focus-ring-style, solid));
        --_fr-speed: var(--select-focus-ring-speed, var(--form-focus-ring-speed, 150ms));
        position: relative;
    }

    /* Size variants */
    .select--sm {
        --_font: var(--font-size-body-sm);
        --_item-font: var(--font-size-xs);
        --_pad-y: var(--spacing-xs);
        --_pad-x: var(--spacing-md);
    }

    .select--md {
        --_font: var(--font-size-body);
        --_item-font: var(--font-size-body-sm);
        --_pad-y: var(--spacing-sm);
        --_pad-x: var(--spacing-md);
    }

    .select--lg {
        --_font: var(--font-size-lg);
        --_item-font: var(--font-size-md);
        --_pad-y: var(--spacing-md);
        --_pad-x: var(--spacing-lg);
    }

    .select__label {
        display: block;
        font-size: var(--_font);
        color: var(--_c);
        margin-block-end: var(--spacing-xs);
    }

    /* Inline label */
    .select--label-inline {
        display: flex;
        align-items: baseline;
        gap: var(--spacing-sm);
    }

    .select--label-inline .select__label {
        margin-block-end: 0;
        white-space: nowrap;
        padding-block: var(--_pad-y);
    }

    .select__value {
        display: none;
    }

    /* Trigger */
    .select__trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        font-family: var(--font-body);
        gap: var(--spacing-md);
        font-size: var(--_font);
        padding: var(--_pad-y) var(--_pad-x);
        background: var(--select-trigger-bg, var(--form-bg, transparent));
        border: none;
        color: var(--_c);
        text-align: var(--select-align, left);
        text-transform: var(--select-text-transform, none);
        letter-spacing: var(--select-letter-spacing, normal);
        cursor: pointer;
        outline: var(--_fr-width) var(--_fr-style) transparent;
        outline-offset: var(--_fr-offset);
        transition: border-color var(--_speed), color var(--_speed), outline-color var(--_fr-speed), background var(--_speed);
    }

    [data-focus-ring="keyboard"] .select .select__trigger:focus-visible {
        outline-color: var(--_fr-color);
    }

    [data-focus-ring="always"] .select .select__trigger:focus {
        outline-color: var(--_fr-color);
    }

    /* Style: underline */
    .select--underline .select__trigger {
        border-bottom: var(--_border-width) solid color-mix(in srgb, var(--_border-color) calc(var(--_border-opacity) * 100%), transparent);
    }

    /* Style: bordered */
    .select--bordered .select__trigger {
        border: var(--_bordered-border-width) solid var(--_border-color);
        border-radius: var(--select-radius, var(--form-radius, var(--radius-lg)));
    }

    /* Style: inline (bare trigger, no border/underline) */
    .select--inline .select__trigger {
        font-family: var(--select-value-font, var(--select-font, var(--font-heading)));
        font-weight: var(--select-value-weight, var(--select-weight, var(--font-weight-heading)));
    }

    .select--inline .select__label {
        font-family: var(--select-label-font, var(--select-font, var(--font-heading)));
        font-weight: var(--select-label-weight, var(--select-weight, var(--font-weight-heading)));
    }

    .select--inline .select__trigger {
        border: none;
        padding-inline: 0 var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .select--interact-hover .select__trigger:hover,
    .select--interact-both .select__trigger:hover,
    .select--interact-hover.is-open .select__trigger,
    .select--interact-both.is-open .select__trigger {
        color: var(--select-hover-color, var(--color-muted));
    }

    .select--interact-focus.is-open .select__trigger {
        border-color: var(--_focus);
    }

    .select__sizer {
        display: block;
        height: 0;
        visibility: hidden;
    }

    .select__sizer > span {
        display: block;
        white-space: nowrap;
    }

    /* Chevron */
    .select__chevron {
        transition: transform var(--_speed);
    }

    .select.is-open .select__chevron {
        transform: rotate(180deg);
    }

    /* Dropdown list — positioning only, panel styling from .dropdown */
    .select__list {
        left: 0;
        min-width: 100%;
        width: max-content;
        top: calc(100% + var(--select-offset, var(--dropdown-offset, 4px)));
    }

    .select--dropdown-right .select__list {
        left: auto;
        right: 0;
    }


    .select.is-open .select__list:not(.dropdown--stagger) {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .select.is-open .select__list.dropdown--stagger {
        visibility: visible;
        pointer-events: auto;
    }

    .select .dropdown__item {
        position: relative;
        padding-right: calc(var(--dropdown-item-padding-inline, var(--spacing-md)) + 15px + var(--spacing-xs));
    }

    .select--has-icons .dropdown__item {
        gap: var(--spacing-sm);
    }

    .select__check {
        position: absolute;
        right: var(--dropdown-item-padding-inline, var(--spacing-md));
        top: 50%;
        transform: translateY(-50%);
        flex-shrink: 0;
    }
}