.item {
    padding: var(--padding-m) var(--padding-l);

    background-color: inherit;
    color: var(--text-1);
    border: none;
    cursor: pointer;

    text-align: start;

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

.child {
    position: fixed;
    inset-inline-start: anchor(self-start);
    inset-block-start: anchor(end);

    grid-template-columns: auto auto;
    place-content: start;

    gap: var(--padding-m);
    padding: var(--padding-m) 0;
    inline-size: max-content;

    background-color: var(--surface-4);
    border: 1px solid var(--surface-5);
    border-block-start-width: 0;
    margin: unset;

    &:popover-open {
        display: grid;
    }

    & > .separator {
        grid-column: span 2;
        inline-size: calc(100% - (2 * var(--padding-m)));
        margin-block: 0;
        border: 1px solid var(--surface-5);
    }

    & > .item {
        grid-column: span 2;
        display: grid;
        grid-template-columns: subgrid;
        align-items: center;

        background-color: var(--surface-4);

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

        & > sub {
            color: var(--text-2);
            text-align: end;
        }
    }
}

:popover-open + .item {
    background-color: var(--surface-4);
}

.commandPalette {
    display: none;
    background-color: var(--surface-1);
    color: var(--text-1);
    gap: var(--padding-m);
    padding: var(--padding-l);
    border: 1px solid var(--surface-3);

    &[open] {
        display: grid;
    }

    &::backdrop {
        background-color: color(from var(--surface-1) xyz x y z / .2);
        backdrop-filter: blur(.25em);
        pointer-events: all !important;
    }
}

.search {
    display: grid;
    gap: var(--padding-m);

    & > input {
        background-color: var(--surface-2);
        color: var(--text-1);
        border: none;
        padding: var(--padding-m);
    }

    & > output {
        display: contents;
        color: var(--text-2);

        & > .selected {
            background-color: color(from var(--info) xyz x y z / .5);
        }

        & b {
            color: var(--text-1);
        }
    }
}