/* Popover menus. The scope menu is a details.menu: the summary is the chip, the list is the popover. */

.menu {
    position: relative;
    display: block;
}

.menu__list {
    position: absolute;
    top: calc(100% + var(--s-1));
    left: 0;
    z-index: 900;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: var(--s-1) 0;
    list-style: none;
    background-color: var(--ink-2);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-2);
    box-shadow: var(--e-overlay);
}

.menu__item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: calc(var(--s-6) + var(--s-1));
    padding: 0 var(--s-3);
    color: var(--paper);
    text-decoration: none;
}

.menu__item:hover {
    color: var(--paper-hi);
    background-color: var(--ink-3);
}

.menu__item[aria-current="true"] {
    color: var(--paper-hi);
}

.menu__item .icon {
    margin-left: auto;
    color: var(--accent);
}

@media (max-width: 899.98px) {
    .menu__item {
        min-height: var(--hit);
    }
}