@layer kora.components {
    kora-select {
        display: inline-block;
        position: relative;
    }

    .kora-select {
        position: relative;
    }

    .kora-select__trigger {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--kora-space-2);
        width: 100%;
        min-width: 10rem;
        padding: 10px var(--kora-space-4);
        background: var(--kora-color-surface);
        color: var(--kora-color-text);
        border: 1px solid var(--kora-color-border);
        border-radius: var(--kora-radius-lg);
        font-family: var(--kora-font-sans);
        font-size: var(--kora-text-md);
        cursor: pointer;
        transition: border-color var(--kora-duration-fast) var(--kora-ease);
    }
    .kora-select__trigger:hover {
        border-color: var(--kora-color-accent);
    }
    .kora-select__trigger[aria-expanded="true"] {
        border-color: var(--kora-color-accent);
    }
    .kora-select__trigger:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .kora-select__value--placeholder {
        color: var(--kora-color-text-muted);
    }

    .kora-select__chevron {
        flex: none;
        transition: transform var(--kora-duration-fast) var(--kora-ease);
    }
    .kora-select__trigger[aria-expanded="true"] .kora-select__chevron {
        transform: rotate(180deg);
    }

    .kora-select__list {
        position: absolute;
        top: calc(100% + var(--kora-space-1));
        left: 0;
        right: 0;
        z-index: var(--kora-z-header);
        margin: 0;
        padding: var(--kora-space-1);
        list-style: none;
        max-height: 16rem;
        overflow-y: auto;
        background: var(--kora-color-surface-raised);
        border: 1px solid var(--kora-color-border);
        border-radius: var(--kora-radius-lg);
        box-shadow: var(--kora-glass-shadow);
    }

    .kora-select__option {
        padding: var(--kora-space-2) var(--kora-space-3);
        border-radius: var(--kora-radius-md);
        color: var(--kora-color-text);
        font-family: var(--kora-font-sans);
        font-size: var(--kora-text-sm);
        cursor: pointer;
    }
    .kora-select__option:hover {
        background: var(--kora-surface-2);
    }
    .kora-select__option[aria-selected="true"] {
        background: var(--kora-color-accent);
        color: var(--kora-white);
    }
}