/* Progressive enhancement: retain the native select and its exact values/events. */
@supports (appearance: base-select) {
    select.filament-color-select,
    select.filament-color-select::picker(select) { appearance: base-select; }
    select.filament-color-select { align-items: center; min-height: 2.6rem; }
    select.filament-color-select::picker(select) {
        background: #fff; color: #1c2f32; border: 1px solid #cbd6d4;
        border-radius: 10px; padding: 5px; max-height: min(28rem, 65vh);
        box-shadow: 0 10px 30px #142f3324; overflow-y: auto;
    }
    select.filament-color-select option {
        display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem;
        min-height: 2.5rem; border-radius: 6px; white-space: normal;
    }
    select.filament-color-select option:hover,
    select.filament-color-select option:focus { background: #edf6f3; }
    select.filament-color-select option:checked { background: #e2f2ed; }
    select.filament-color-select option:disabled { opacity: .5; }
    select.filament-color-select option::checkmark { order: 2; margin-left: auto; }
    .filament-option-swatch {
        display: inline-block; flex: 0 0 1.35rem; width: 1.35rem; height: 1.35rem;
        border-radius: 50%; border: 1px solid #0003;
        background: var(--filament-color); box-shadow: inset 0 1px 2px #fff6;
    }
}