/* Shared dropdown material. Keep the real select, values, events and native
   keyboard/accessibility behavior; opt in to the browser's styleable picker. */
@supports (appearance: base-select) and selector(::picker(select)) {
    body.cmp-body select:not([multiple]):not([size]),
    body.cmp-body select:not([multiple])[size='1'],
    body.cmp-body select:not([multiple]):not([size])::picker(select),
    body.cmp-body select:not([multiple])[size='1']::picker(select) {
        appearance: base-select;
    }
    body.cmp-body select:not([multiple]):not([size]),
    body.cmp-body select:not([multiple])[size='1'] {
        min-inline-size: 0;
        max-inline-size: 100%;
        min-block-size: 44px;
        /* The styleable selected label can wrap; override the native input's fixed height. */
        block-size: auto;
        height: auto;
        padding: 10px 12px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 12px;
        background: rgba(0,0,0,.45);
        background-image: none;
        color: #fff;
        font-family: inherit;
        line-height: 1.4;
        gap: 12px;
        cursor: pointer;
    }
    body.cmp-body select:disabled { opacity: .55; cursor: not-allowed; }
    body.cmp-body select::picker-icon { color: #bdbdc5; transition: transform 150ms ease; }
    body.cmp-body select:open::picker-icon { transform: rotate(180deg); }
    body.cmp-body select::picker(select) {
        margin-block: 6px;
        max-block-size: min(340px, calc(100dvh - 24px));
        max-inline-size: calc(100vw - 24px);
        padding: 6px;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid var(--cmp-black-glass-line);
        border-radius: 14px;
        background: var(--cmp-black-glass-bg);
        background-image: none;
        color: #fff;
        box-shadow: var(--cmp-black-glass-shadow);
        backdrop-filter: blur(var(--cmp-black-glass-blur));
        -webkit-backdrop-filter: blur(var(--cmp-black-glass-blur));
        font: inherit;
    }
    body.cmp-body select option {
        min-block-size: 44px;
        padding: 10px 12px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: #e8e8ed;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
        cursor: pointer;
    }
    body.cmp-body select option:checked {
        border-color: rgba(255,255,255,.12);
        background: rgba(255,255,255,.1);
        color: #fff;
    }
    body.cmp-body select option:focus-visible {
        outline: 1px solid rgba(255,255,255,.55);
        outline-offset: -2px;
    }
    body.cmp-body select option:disabled { color: #73737e; cursor: not-allowed; }
    body.cmp-body select option::checkmark { color: #fff; margin-inline-end: 4px; }
    body.cmp-body select optgroup { color: #a1a1aa; font-weight: 600; }
    @media (hover: hover) {
        body.cmp-body select option:enabled:hover { background: rgba(255,255,255,.12); color: #fff; }
    }
    @media (prefers-reduced-motion: reduce) {
        body.cmp-body select::picker-icon { transition: none; }
    }
}