/*
 * The upgraded <select> (selectDropdown.js): a button styled like the native .select, with a popup listbox
 * whose height caps at ~10 options and then scrolls — the whole reason the widget exists, since a native
 * select's popup can't be height-styled.
 */

.select-dropdown {
    position: relative;
}

.select-dropdown__button {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.select-dropdown__list {
    --select-dropdown-option-h: 2.4rem;
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: calc(var(--select-dropdown-option-h) * 10);   /* ~10 options, then scroll */
    overflow-y: auto;
}

.select-dropdown__option {
    box-sizing: border-box;
    height: var(--select-dropdown-option-h);
    display: flex;
    align-items: center;
    padding: 0 var(--space-md);
    cursor: pointer;
    white-space: nowrap;
}

.select-dropdown__option:hover,
.select-dropdown__option:focus {
    background: var(--surface-container-high);
    outline: none;
}

.select-dropdown__option.is-selected {
    font-weight: 600;
}