.calendar-menu-trigger { anchor-name: --calendar-menu; }
.calendar-menu { position-anchor: --calendar-menu; }

.activity-menu-trigger { anchor-name: --activity-menu; }
.activity-menu { position-anchor: --activity-menu; }

.dropdown-menu {
    position: fixed;
    inset: auto;
    top: anchor(bottom);
    left: anchor(center);
    translate: -50% 0.25rem;

    margin: 0;
    padding: 0.25rem 0;
    border: 1px solid var(--gray);
    border-radius: 0.25rem;
    background: white;
    box-shadow: 0 0.125rem 0.5rem hsl(0 0% 0% / 0.15);
    min-width: 12rem;

    &::backdrop { background: transparent; }

    li a {
        display: block;
        padding: 0.5rem 1rem;
        white-space: nowrap;
        color: inherit;
        text-decoration: none;

        &:hover { background: var(--yellow-desaturated); }
    }
}