/* Baseline styling for SearchableSelect overlays, which are teleported into OverlayHost. */
.elx-ui-searchable-select-overlay {
    --elx-ui-searchable-select-max-height: 20rem;
    --elx-ui-searchable-select-surface: #fff;
    --elx-ui-searchable-select-text: #1f2937;
    --elx-ui-searchable-select-muted: #64748b;
    --elx-ui-searchable-select-border: #cbd5e1;
    --elx-ui-searchable-select-hover: #f1f5f9;
    --elx-ui-searchable-select-active: #e2e8f0;
    --elx-ui-searchable-select-selected: #dbeafe;
    --elx-ui-searchable-select-selected-text: #123b71;
    --elx-ui-searchable-select-radius: 0.375rem;
    --elx-ui-searchable-select-shadow: 0 0.5rem 1rem rgb(15 23 42 / 0.15);

    max-height: var(--elx-ui-searchable-select-max-height);
    overflow: auto;
    border: 1px solid var(--elx-ui-searchable-select-border);
    border-radius: var(--elx-ui-searchable-select-radius);
    background: var(--elx-ui-searchable-select-surface);
    color: var(--elx-ui-searchable-select-text);
    box-shadow: var(--elx-ui-searchable-select-shadow);
    overscroll-behavior: contain;
    text-align: left;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__listbox,
.elx-ui-searchable-select-overlay .elx-ui-searchable-select__group,
.elx-ui-searchable-select-overlay .elx-ui-searchable-select__group-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__listbox {
    padding-block: 0.25rem;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__status {
    padding: 0.65rem 0.8rem;
    color: var(--elx-ui-searchable-select-muted);
    text-align: left;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__group-header {
    padding: 0.5rem 0.875rem 0.25rem;
    color: var(--elx-ui-searchable-select-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    text-transform: uppercase;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option {
    display: block;
    margin-inline: 0.25rem;
    padding: 0.625rem 0.875rem;
    border-radius: calc(var(--elx-ui-searchable-select-radius) - 0.0625rem);
    color: var(--elx-ui-searchable-select-text);
    cursor: pointer;
    text-align: left;
    transition: background-color 120ms ease, color 120ms ease;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option:hover:not(.elx-ui-searchable-select__option--disabled) {
    background-color: var(--elx-ui-searchable-select-hover);
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option--active {
    background-color: var(--elx-ui-searchable-select-active);
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option--selected,
.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option--selected:hover,
.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option--selected.elx-ui-searchable-select__option--active {
    background-color: var(--elx-ui-searchable-select-selected);
    color: var(--elx-ui-searchable-select-selected-text);
    font-weight: 600;
}

.elx-ui-searchable-select-overlay .elx-ui-searchable-select__option--disabled {
    color: var(--elx-ui-searchable-select-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    .elx-ui-searchable-select-overlay .elx-ui-searchable-select__option {
        transition: none;
    }
}