.select-component {
    --anchor-name: --test;
    display: inline-flex;

    select { display: none; }

    .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        anchor-name: var(--anchor-name);
        font-weight: bold;

        span {}

        svg {
            transition: all .2s linear;
        }
    }

    &:has(:popover-open) {
        .title svg {
            transform: rotateZ(-180deg);
        }
    }
    .dropdown {
        position-anchor: var(--anchor-name);
        position-area: bottom span-right;
        border-radius: 1rem;
        box-shadow: 0 4px 4px 0 color-mix(in oklab, var(--color-black) 25%, transparent);
        opacity: 1;
        translate: 0 .5rem;
        transition-behavior: allow-discrete;
        transition-duration: .2s;
        transition-timing-function: linear;
        position-try-fallbacks: flip-inline;


        @starting-style {
            &:popover-open {
                opacity: 0;
                translate: 0 1.5rem;
            }
        }
        &:not(:popover-open) {
            opacity: 0;
            translate: 0 1.5rem;
        }

        button {
            display: flex;
            padding: 1.125rem 1rem;
            width: 100%;
            font-weight: bold;
            text-align: left;
            &:hover, &.selected {
                background-color: color-mix(in oklab, var(--color-gray) 60%, transparent);
            }
        }
    }
}