.box {
    appearance: none;

    display: block grid;
    place-items: center start;

    padding: var(--size-2);
    background-color: transparent;
    border: none;
    border-radius: var(--radius-2);
    font-size: 1rem;

    &:hover {
        background-color: var(--surface-700);
    }

    @supports (appearance: base-select) {

        &,
        &::picker(select) {
            appearance: base-select;
        }

        &::picker(select) {
            /* display: block grid;
            row-gap: var(--size-2); */

            background-color: var(--surface-3);
            padding: var(--size-2) 0;
            border: none;
            box-shadow: var(--shadow-2);

            opacity: 0;
            block-size: 0;
            overflow: clip;
            transition:
                height 0.5s ease-out,
                opacity 0.5s ease-out,
                overlay 0.5s,
                display 0.5s,
                overflow 0.5s;

            transition-behavior: allow-discrete;
        }

        &:open {
            background-color: var(--surface-3);
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;

            &::picker(select) {
                opacity: 1;
                block-size: calc-size(auto, size);
                overflow: auto;

                @starting-style {
                    opacity: 0;
                    block-size: 0;
                }
            }
        }

        & > option {
            display: block grid;
            grid-auto-flow: column;
            place-items: center start;

            border-radius: var(--radius-2);
            padding: var(--size-2);

            cursor: pointer;

            &:checked {
                background-color: var(--surface-4);
            }

            &::checkmark {
                display: none;
            }
        }
    }
}

/* .box {
    display: contents;

    &:has(> :popover-open) > .button {
        background-color: var(--surface-500);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.button {
    position: relative;
    display: grid;
    grid-template-columns: inherit;
    place-items: center start;

    block-size: 1em;
    box-sizing: content-box;

    padding: var(--size-2);
    background-color: transparent;
    border: none;
    border-radius: var(--radius-2);
    font-size: 1rem;

    cursor: pointer;

    &:hover {
        background-color: var(--surface-700);
    }

    &:has(> .caret) {
        padding-inline-end: calc(1em + (2 * var(--size-2)));
    }

    & > .caret {
        position: absolute;
        inset-inline-end: var(--size-2);
        inset-block-start: 50%;
        translate: 0 -50%;
        inline-size: 1em;
    }
}

.dialog {
    display: none;
    position: relative;
    grid-template-columns: inherit;

    inset-inline-start: anchor(start);
    inset-block-start: anchor(end);
    position-try-fallbacks: flip-block, flip-inline;

    background-color: var(--surface-3);
    padding: var(--size-2);
    border: none;
    box-shadow: var(--shadow-2);

    &:popover-open {
        display: grid;
    }

    & > header {
        display: grid;
        grid-column: 1 / -1;

        gap: var(--padding-s);
    }

    & > main {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        row-gap: var(--padding-s);
    }
}

.option {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    place-items: center start;

    border-radius: var(--radii-m);
    padding: var(--padding-s);
    margin-inline: calc(-1 * var(--padding-s));

    cursor: pointer;

    &.selected {
        background-color: oklch(from var(--info) l c h / .1);
    }
} */