.menu {
    --orientation-direction: column;
    --orientation-spacing: var(--spacing-y) 0 0 0;

    --sizing-text-size: var(--document-font-size);
    --sizing-text-line-height: var(--document-font-line-height);

    --spacing-x: var(--spacing-root-small);
    --spacing-y: var(--spacing-root-small);

    @apply leading-[var(--sizing-text-line-height)];

    font-size: var(--sizing-text-size);

    & ul {
        @apply flex items-stretch ml-0;

        flex-direction: var(--orientation-direction);

        & > li {
            @apply flex flex-col min-w-max;

            & > ul {
                @apply mt-[var(--spacing-y)] px-[var(--spacing-local-small)];
            }

            & + li {
                margin: var(--orientation-spacing);
            }

            & > small {
                @apply font-bold opacity-40 select-none tracking-widest;
            }

            & > :is(hr, span[role="separator"]) {
                @apply m-0;
            }

            & > span[role="separator"]::before {
                @apply max-w-[1ch];
            }

            & > :is(a, button, label) {
                all: unset;

                @apply bg-transparent cursor-pointer flex flex-grow gap-[var(--spacing-local-small)]
                items-center leading-[inherit] !no-underline px-[var(--spacing-local-medium)]
                py-[var(--spacing-local-small)] relative select-none whitespace-nowrap;

                border-radius: var(--radius-medium);

                transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

                &:is(:disabled, [aria-disabled="true"]) {
                    @apply cursor-not-allowed opacity-40;
                }

                &:not([data-palette]) {
                    --palette-background-bold: inherit;
                    --palette-foreground-normal: inherit;

                    @apply text-[rgb(var(--palette-foreground-normal))];

                    &:is(:focus, :hover) {
                        @apply;

                        background-color: rgba(
                            var(--palette-foreground-normal),
                            theme("opacity.20")
                        );
                    }

                    &:is(:active, [aria-current], [aria-pressed="true"]) {
                        @apply text-[rgb(var(--palette-background-bold))];

                        background-color: rgba(
                            var(--palette-foreground-normal),
                            theme("opacity.75")
                        );
                        transform: unset;
                    }
                }

                &[data-palette] {
                    @apply text-[rgb(var(--palette-background-bold))];

                    &:is(:focus, :hover) {
                        @apply;

                        background-color: rgba(var(--palette-background-bold), theme("opacity.20"));
                    }

                    &:is(:active, [aria-current], [aria-pressed="true"]) {
                        @apply text-[rgb(var(--palette-foreground-normal))];

                        background-color: rgba(var(--palette-background-bold), theme("opacity.75"));
                        transform: unset;
                    }
                }
            }
        }
    }
}