/*
 * <x-menu-group>: a labelled or gapped cluster of items in an `<x-menu>`
 * (menu-group.blade.php).
 *
 * Without `gap`, a plain 4px of vertical padding around the cluster, 0 at either end of the list
 * (the popover's own padding already gives that room). `data-md-gap` draws M3 Expressive's
 * "Grouped" layout instead: items 2px apart (`SegmentedMenuTokens.SegmentedGap`, androidx Compose
 * Material 3, Apache-2.0), clusters themselves 8px apart — the same 8px `<x-menu-separator>`
 * keeps above and below its line, so a menu is the same height whichever it uses
 * (docs/reference/m3/components-actions-communication-containment.md § Menus → Specification).
 *
 * The label is label-large in on-surface-variant, `aria-hidden` beside the `role="group"`
 * `aria-label` a screen reader reads instead (`SegmentedMenuTokens.GroupLabelTextFont`).
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@layer material.components {
    [data-md-menu-group]:not([data-md-gap]) {
        padding-block: var(--md-sys-measurement-space50);
    }

    [data-md-menu-group]:not([data-md-gap]):first-child {
        padding-block-start: 0;
    }

    [data-md-menu-group]:not([data-md-gap]):last-child {
        padding-block-end: 0;
    }

    [data-md-menu-group][data-md-gap]:not(:first-child) {
        margin-block-start: var(--md-sys-measurement-space100);
    }

    [data-md-menu-group-label] {
        padding-inline: var(--md-sys-measurement-space200);
        padding-block: var(--md-sys-measurement-space100) var(--md-sys-measurement-space50);
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-label-lg);
        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
        font-variation-settings: normal;
    }

    [data-md-menu-group-items] {
        display: flex;
        flex-direction: column;
        gap: var(--md-sys-measurement-space25);
    }
}