/* *** SELECT STYLING START *** */
: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
}

select.fg-custom-select {
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--fg-msls-border) 80%, transparent);
    /* opt into customizing select */
    &,
    &::picker(select) {
        appearance: base-select; /* custom select styling */
    }

    field-sizing: content;
    cursor: pointer;
    background: var(--fg-msls-bg-light);
    padding: 0;
    font-size: 0.75em;

    /* 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(var(--fg-msls-bg-light),.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;
    }
}
@media( max-width: 768px ){
	select.fg-custom-select {
		width: 100%;
		border-radius: 0;
		& 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;
}