:root {
    --fg-msls-bg-dark: #222;
    --fg-msls-bg-light: #ffffffbb;
    --fg-msls-bg-selected: #222222bb;
    --fg-msls-text-selected: #EEE;
    --fg-msls-border: #601D3C;
}

/*
 * The custom select UI is progressive enhancement.
 *
 * Firefox's current release builds do not enable the customizable-select
 * picker (::picker(select)) by default. Keep the normal/native <select>
 * available as the fallback, while retaining the existing custom UI in
 * browsers that support appearance: base-select.
 */
select.fg-custom-select {
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--fg-msls-border) 80%, transparent);
    field-sizing: content;
    cursor: pointer;
    background: var(--fg-msls-bg-light);
    padding: 0;
    font-size: 0.75em;
}

/* *** CUSTOMIZABLE SELECT STYLING START *** */
@supports (appearance: base-select) {
    select.fg-custom-select {
        &,
        &::picker(select) {
            appearance: base-select;
        }

        /* picker dropdown styling */
        &::picker(select) {
            transition:
                opacity .2s ease,
                transform .2s ease,
                display .2s allow-discrete,
                overlay .2s allow-discrete;
            background: light-dark(var(--fg-msls-bg-light), var(--fg-msls-bg-dark));
            border-radius: 5px;
            padding: 0;
            margin-block: 5px;

            @media (forced-colors: none) {
                border: none;
            }
        }

        &::picker-icon {
            display: none;
        }

        /* media elements */
        img,
        svg,
        video {
            block-size: auto;
            max-inline-size: 100%;
            display: block;
        }

        /* closed state */
        &:not(:open)::picker(select) {
            opacity: 0;
            transform: scale(.95);
        }

        /* open state */
        &:open::picker(select) {
            opacity: 1;
            transform: scale(1);
        }

        /* selected option transition */
        selectedcontent>* {
            transition:
                display 1s allow-discrete,
                opacity 1s;

            @starting-style {
                opacity: 0;
                transform: translateY(10px);
            }

            opacity: 1;
        }

        /* button/trigger styling */
        >button {
            display: inline-flex;
            border-radius: 0;
            background: rgba(255,255,255,.5);
            color: var(--fg-msls-bg-dark);
            padding: 0.5rem;
            font-family: inherit;
            font-weight: bold;
            text-transform: none;
            font-size: .8rem;
            line-height: 1.2;
            border: none;
            box-shadow: none;

            &:focus-visible {
                outline-offset: -3px;
            }

            &:has(selectedcontent) {
                align-items: start;
                min-inline-size: 20ch;
                flex-direction: column;
            }

            >div {
                inline-size: 100%;
                display: flex;
                justify-content: space-between;
                gap: 1rem;
            }

            & svg {
                inline-size: 2ch;
            }
        }

        &:open>button svg {
            transform: rotate(.5turn);
        }

        /* dropdown list styling */
        >div {
            min-inline-size: calc(anchor-size(self-inline) + 20px);
            scroll-behavior: smooth;
        }

        & option {
            display: flex;
            align-items: center;
            background: white;
            gap: 1rem;
            padding-block: .25rem;
            padding-inline: 1rem;
            cursor: pointer;
            outline-offset: -1px;

            &::checkmark {
                font-weight: 700;
            }

            &:focus-visible {
                outline-offset: -1px;
            }

            &:is(:focus, :hover) {
                background: oklch(from var(--fg-msls-bg-dark) l c h / 75%);
                color: var(--fg-msls-text-selected);
            }

            &:is(:checked) {
                background: var(--fg-msls-bg-dark);
                font-weight: 700;
                color: var(--fg-msls-text-selected);
            }
        }

        /* custom select utility classes */
        .custom-option {
            display: flex;
            gap: 1rem;
            align-items: center;
            justify-content: space-between;
        }
    }
}
/* *** CUSTOMIZABLE SELECT STYLING END *** */

/* Native-select fallback for browsers without customizable-select support. */
@supports not (appearance: base-select) {
    select.fg-custom-select {
        appearance: auto;
        -webkit-appearance: menulist;
        width: auto;
        min-height: 2.5rem;
        padding: 0.5rem 0.75rem;
        background: var(--fg-msls-bg-light);
        color: var(--fg-msls-bg-dark);
        border: 1px solid color-mix(in srgb, var(--fg-msls-border) 80%, transparent);
        border-radius: 5px;
        font-family: inherit;
        font-weight: bold;
        font-size: .8rem;
        line-height: 1.2;
        box-sizing: border-box;
    }

    /* These are enhancement-only children. A native select ignores them,
       but hiding them makes the fallback robust in browsers with partial
       customizable-select parsing. */
    select.fg-custom-select > button {
        display: none;
    }

    select.fg-custom-select > div {
        display: contents;
    }

    select.fg-custom-select option {
        color: #222;
        background: #fff;
        font-family: inherit;
        font-weight: normal;
    }
}

@media (max-width: 768px) {
    select.fg-custom-select {
        width: 100%;
        border-radius: 0;
    }

    @supports (appearance: base-select) {
        select.fg-custom-select {
            & button {
                width: 100%;
                opacity: 0.85;
            }

            &::picker(select) {
                border-radius: 0;
            }
        }
    }
}

/* Focus ring wherever the trigger button actually lives. */
select.fg-custom-select:focus {
    outline: 3px solid black;
}