@layer components {
    .menu {
        border-radius: calc(var(--control-block-size) / 2 + 0.375rem);
        margin-top: 0.25rem;
        padding: 0.5rem;
        min-width: 14rem;
        border: 0;
        box-shadow:
            0 0 0 1px var(--hairline),
            0 0.5rem 1.5rem
                light-dark(oklch(0% 0 0deg / 12%), oklch(0% 0 0deg / 40%));
        position: absolute;
        position-anchor: auto;
        position-area: bottom span-right;
        position-try:
            flip-inline,
            flip-block,
            flip-block flip-inline;

        /* Its own thick material: a light wash in light mode, and in dark
           mode a dark surface close to the tertiary system background, so
           it never reads as a grey wash over dark content. */
        backdrop-filter: blur(1.25rem) saturate(1.8);
        background-color: light-dark(
            oklch(98% 0 0deg / 82%),
            oklch(29.4% 0.004 286deg / 90%)
        );
        color: var(--label);
    }

    .menu__content {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .menu__item {
        align-items: center;
        background-color: transparent;
        border: none;
        border-radius: calc(var(--control-block-size) / 2 - 0.125rem);
        color: var(--label);
        cursor: pointer;
        display: grid;
        font-family: inherit;
        font-size: var(--font-size-callout);
        font-weight: 400;
        gap: 0.75rem;
        grid-template-columns: 1fr;
        min-height: var(--control-block-size);
        padding: 0.5rem 0.75rem;
        position: relative;
        text-align: left;
        text-decoration: none;
        width: 100%;
    }

    .menu__item--has-leading {
        grid-template-columns: var(--icon-size) 1fr;
    }

    .menu__item--has-trailing {
        grid-template-columns: 1fr var(--icon-size);
    }

    .menu__item--has-leading.menu__item--has-trailing {
        grid-template-columns: var(--icon-size) 1fr var(--icon-size);
    }

    .menu__item:focus-visible:not([disabled]) {
        background-color: var(--quaternary-system-fill);
    }

    @media (hover: hover) {
        .menu__item:hover:not([disabled]) {
            background-color: var(--quaternary-system-fill);
        }
    }

    .menu__item:active:not([disabled]) {
        background-color: var(--tertiary-system-fill);
    }

    .menu__item--role-destructive {
        color: var(--system-red);
    }

    .menu__item-leading,
    .menu__item-trailing {
        align-items: center;
        display: flex;
        flex-shrink: 0;
        justify-content: center;
    }

    .menu__item-label {
        line-height: 1.3;
        min-width: 0;
        overflow-wrap: break-word;
    }

    .menu__divider {
        background-color: var(--hairline);
        border: none;
        height: 1px;
        margin: 0.5rem;
    }

    .menu__item:disabled,
    .menu__item[aria-disabled="true"] {
        color: var(--tertiary-label);
        cursor: default;
    }

    /* Compact density: macOS menu metrics. 13px text, 22px rows with a
       6px radius, 16px leading icons, and the hovered or focused row
       filled with the tint and drawn in white. */
    @media (pointer: fine) and (not ((min-width: 120rem) and (display-mode: fullscreen))) {
        .app .menu {
            --icon-size: 1rem;

            border-radius: 0.625rem;
            margin-top: 0.125rem;
            min-width: 12rem;
            padding: 0.3125rem;
        }

        .app .menu__item {
            border-radius: 0.375rem;
            font-size: var(--font-size-body);
            gap: 0.375rem;
            min-height: 1.375rem;
            padding: 0.125rem 0.5rem;

            & svg {
                block-size: 1rem;
                inline-size: 1rem;
            }

            &:is(:hover, :focus-visible):not(
                    [disabled],
                    [aria-disabled="true"]
                ) {
                background-color: var(--tint);
                color: oklch(100% 0 0deg);
            }

            &:active:not([disabled], [aria-disabled="true"]) {
                background-color: var(--tint-pressed);
                color: oklch(100% 0 0deg);
            }
        }

        .app .menu__divider {
            margin: 0.3125rem 0.5rem;
        }
    }
}