/* *** SELECT STYLING START *** */

select.fg-custom-select {
    /* opt into customizing select */
    &,
    &::picker(select) {
        appearance: base-select;
    }

    field-sizing: content;
    cursor: pointer;
    background: none;
    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(--ast-global-color-0), var(--ast-global-color-0));
        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);
        padding: 0.5rem;
        text-transform: none;
        font-size: 0.75rem;
        border: 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;

        &.scrollable {
            max-block-size: 20lh;
            scrollbar-width: thin;
        }

        & label {
            display: block;
            position: sticky;
            top: 0;
            z-index: 1;
            padding-inline: 1rem;
        }

        & 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(--ast-global-color-0) l c h / 75%);
                color: inherit;
            }

            &:is(:checked) {
                background: var(--ast-global-color-0);
                font-weight: 700;
            }
        }
    }
    /* 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;
        }
    }
}

/* *** CUSTOM SELECT STYLING END *** */