/*
 * The menus: `<x-menu>` and what a form's own dropdowns wear too, so a menu and a form read as
 * one family.
 *
 * Three lists wear it:
 *
 *   - `<x-menu>`'s own popover (`[data-md-menu-popover]`) and, inside it, a submenu
 *     (`[data-md-submenu]`, menu-item.css).
 *   - `<x-select>`'s: the native <select>, opted into the browser's customizable select
 *     (`appearance: base-select`). `::picker(select)` is the menu and each <option> a row, while
 *     the keyboard, type-to-find, the screen reader and the form value stay the browser's own.
 *   - `<x-choices searchable>`'s listbox, which Alpine draws, as `[data-md-field-menu]` and
 *     `[data-md-field-option]`.
 *
 * M3's menu as its tokens have it (StandardMenuTokens/VibrantMenuTokens/SegmentedMenuTokens,
 * androidx Compose Material 3, Apache-2.0): surface-container-low at elevation 2, large corner,
 * 48px rows in body-large, the chosen row in secondary-container with a tick at its end (so it is
 * not told by colour alone), and the state layer on hover (only where a pointer can hover) and
 * focus.
 *
 * `[data-md-menu]` is `<x-menu>`'s root, holding the trigger and the popover; the popover itself
 * is `[data-md-menu-popover]`, capped at 288px so a long menu scrolls instead of running off the
 * top layer's edge (ACT-04), and transitions in by growing from its trigger's corner while it
 * fades, on the spatial and effects springs respectively (ACT-26). `data-md-vibrant` swaps its
 * container for tertiary-container; a nested submenu inherits the colour through
 * `--material-menu-surface`/`--material-menu-ink`, which the sheet's own copy of the list falls
 * back to instead (it is not a descendant of the popover).
 *
 * `sheet-at-compact`'s bottom sheet is `<x-bottom-sheet>` (still Tailwind): `[data-md-menu-sheet]`
 * cancels its 24px padding and restyles a submenu to open in place under its item instead of
 * beside it (M3 calls submenus "best suited to large screens").
 *
 * Where the browser has no customizable select, the select keeps its native list, which
 * `color-scheme` themes. Every rule for the select's own rows is inside `@supports`: a browser
 * that paints option colours into its native list would otherwise show a half-painted one.
 */

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

@import './icon.css';
@import './bottom-sheet.css';

@layer material.components {
    [data-md-menu] {
        position: relative;
        display: inline-flex;
    }

    [data-md-menu-trigger] {
        display: inline-flex;
    }

    [data-md-menu-popover] {
        --material-menu-surface: var(--md-sys-color-surface-container-low);
        --material-menu-ink: var(--md-sys-color-on-surface);

        inset: auto;
        margin: 0;
        margin-block: var(--md-sys-measurement-space50);
        min-inline-size: 112px;
        max-inline-size: 280px;
        max-block-size: min(288px, calc(100dvh - 32px));
        overflow-y: auto;
        border-width: 0;
        border-radius: var(--md-sys-shape-corner-lg);
        padding: var(--md-sys-measurement-space50);
        background-color: var(--material-menu-surface);
        color: var(--material-menu-ink);
        box-shadow: var(--md-sys-elevation-2);
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
        opacity: 0;
        scale: 0.95;
        transition-property: opacity, scale, display, overlay;
        transition-duration:
            var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-spatial-fast-duration),
            var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration);
        transition-timing-function:
            var(--md-sys-motion-effects-fast), var(--md-sys-motion-spatial-fast), linear, linear;
        transition-behavior: allow-discrete;

        &:popover-open {
            opacity: 1;
            scale: 1;
        }

        @starting-style {
            &:popover-open {
                opacity: 0;
                scale: 0.95;
            }
        }
    }

    [data-md-menu-popover]:has(> [data-md-menu-filter]) {
        padding: 0;
    }

    [data-md-menu-popover][data-md-vibrant] {
        --material-menu-surface: var(--md-sys-color-tertiary-container);
        --material-menu-ink: var(--md-sys-color-on-tertiary-container);
    }

    [data-md-menu-popover][data-md-position='bottom-start'] {
        transform-origin: top;
        position-area: bottom span-right;
    }

    [data-md-menu-popover][data-md-position='bottom-end'] {
        transform-origin: top;
        position-area: bottom span-left;
    }

    [data-md-menu-popover][data-md-position='top-start'] {
        transform-origin: bottom;
        position-area: top span-right;
    }

    [data-md-menu-popover][data-md-position='top-end'] {
        transform-origin: bottom;
        position-area: top span-left;
    }

    /*
     * `<x-menu filter>`: M3's menu as a filtering surface. The field stays put while the list
     * scrolls under it and takes the menu's own container, so a vibrant menu's field is vibrant
     * too. It is a plain <input> with no field chrome — M3's menus embed a text field, not a text
     * field component.
     */
    [data-md-menu-filter] {
        position: sticky;
        inset-block-start: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 12px;
        min-block-size: var(--md-sys-measurement-space600);
        padding-inline: var(--md-sys-measurement-space200);
        border-block-end: 1px solid var(--md-sys-color-outline-variant);
        background-color: var(--material-menu-surface, var(--md-sys-color-surface-container-low));
    }

    [data-md-menu-filter] input {
        flex: 1;
        min-inline-size: 0;
        border-width: 0;
        background-color: transparent;
        padding: 0;
        color: inherit;
        font: var(--md-sys-typescale-body-lg);
        letter-spacing: var(--md-sys-typescale-body-lg-tracking);
        font-variation-settings: normal;
        outline: none;
    }

    [data-md-menu-filter] input::placeholder {
        color: color-mix(in srgb, var(--material-menu-ink, var(--md-sys-color-on-surface)) 70%, transparent);
    }

    [data-md-menu-list] {
        padding: var(--md-sys-measurement-space50);
    }

    [data-md-menu-empty] {
        padding-inline: var(--md-sys-measurement-space200);
        padding-block: 12px;
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-body-md);
        letter-spacing: var(--md-sys-typescale-body-md-tracking);
        font-variation-settings: normal;
    }

    /* The filter hides what the query leaves out with the `hidden` attribute; a row's own
       `display: flex` would otherwise beat the user agent's `[hidden] { display: none }`. */
    :is([data-md-menu-popover], [data-md-menu-sheet]) [hidden] {
        display: none;
    }

    /* `data-md-active` is the row the arrow keys are on while the focus stays in the field — the
       state layer the roving focus would have drawn, without taking the focus off the field. A
       chosen or current row keeps its own colour. */
    :is([data-md-menu-popover], [data-md-menu-sheet]) [role^="menuitem"][data-md-active]:not([aria-checked="true"], [aria-current="page"]) {
        background-color: color-mix(in srgb, var(--material-menu-ink, var(--md-sys-color-on-surface)) 8%, transparent);
    }

    /*
     * `<x-menu sheet-at-compact>`: the copy of the list in the bottom sheet a compact window opens
     * instead of the popover. The sheet is surface-container-low, as the standard menu is, so the
     * fallbacks above already paint its field; the field reaches both edges of the sheet and holds
     * its icon where the rows hold theirs, 24px in (the list is 8px in, a row's own padding 16px).
     * `-24px` cancels the bottom sheet's own padding.
     */
    [data-md-menu-sheet] {
        margin-inline: calc(-1 * var(--md-sys-measurement-space300));
        padding-inline: var(--md-sys-measurement-space100);
    }

    [data-md-menu-sheet]:has(> [data-md-menu-filter]) {
        padding-inline: 0;
    }

    [data-md-menu-sheet] [data-md-menu-filter] {
        padding-inline: var(--md-sys-measurement-space300);
    }

    [data-md-menu-sheet] [data-md-menu-list] {
        padding-inline: var(--md-sys-measurement-space100);
        padding-block: var(--md-sys-measurement-space50) 0;
    }

    /*
     * A submenu there opens in place: its list stands under the item, inset by 16px, instead of in
     * a popover beside it, which a sheet has no room for (M3 calls submenus "best suited to large
     * screens", docs/reference/m3/components-actions-communication-containment.md § Menus). The
     * markup is the popover's, never shown as one: the user agent's `[popover]` box is undone, the
     * list is shown while its item says `aria-expanded="true"`, and it fades in on the effects
     * track.
     */
    [data-md-menu-sheet] [data-md-submenu] {
        position: static;
        inset: auto;
        inline-size: auto;
        max-inline-size: none;
        block-size: auto;
        max-block-size: none;
        margin: 0;
        padding-block: var(--md-sys-measurement-space25);
        padding-inline: var(--md-sys-measurement-space200) 0;
        overflow: visible;
        border-radius: 0;
        background-color: transparent;
        color: inherit;
        box-shadow: none;
        opacity: 1;
        scale: none;
        transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
    }

    [data-md-menu-sheet] [aria-expanded="true"] + [data-md-submenu] {
        display: block;

        @starting-style {
            opacity: 0;
        }
    }

    /* The chevron turns from the way a popover would open to the way this list did: down, which
       is a quarter turn the other way on the chevron `mirror-rtl` mirrors too. */
    [data-md-menu-sheet] [data-md-submenu-chevron] {
        transition: rotate var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
    }

    [data-md-menu-sheet] [aria-expanded="true"] > [data-md-submenu-chevron] {
        rotate: 90deg;

        &:dir(rtl) {
            rotate: -90deg;
        }
    }

    [data-md-field-menu] {
        max-block-size: 18rem;
        overflow-y: auto;
        padding-block: var(--md-sys-measurement-space100);
        border-radius: var(--md-sys-shape-corner-xs);
        background-color: var(--md-sys-color-surface-container);
        box-shadow: var(--md-sys-elevation-2);
    }

    /* As a popover (`<x-choices searchable>`), it hangs under its field, as wide, and goes above
       only when there is no room below. */
    [data-md-field-menu][popover] {
        inset: auto;
        top: anchor(bottom);
        left: anchor(left);
        width: anchor-size(width);
        margin: var(--md-sys-measurement-space50) 0;
        border-width: 0;
        padding-inline: 0;
        color: var(--md-sys-color-on-surface);
        position-try-fallbacks: flip-block;
    }

    [data-md-field-option][aria-disabled="true"] {
        color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
        cursor: default;
    }

    [data-md-field-option] {
        display: flex;
        align-items: center;
        gap: 12px;
        min-block-size: var(--md-sys-measurement-space600);
        padding-inline: var(--md-sys-measurement-space200);
        color: var(--md-sys-color-on-surface);
        font: var(--md-sys-typescale-body-lg);
        letter-spacing: var(--md-sys-typescale-body-lg-tracking);
        font-variation-settings: normal;
        cursor: pointer;
    }

    /* `data-md-active` is the row the arrow keys or the pointer are on. */
    [data-md-field-option][data-md-active] {
        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    }

    [data-md-field-option][aria-selected="true"] {
        background-color: var(--md-sys-color-secondary-container);
        color: var(--md-sys-color-on-secondary-container);
    }

    [data-md-field-option][aria-selected="true"][data-md-active] {
        background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
    }

    [data-md-field-check] {
        margin-inline-start: auto;
    }

    [data-md-field-option]:not([aria-selected="true"]) [data-md-field-check] {
        visibility: hidden;
    }

    @supports (appearance: base-select) {
        /* The select itself opts in from select.css, after its own `appearance: none`: both sit in
           `material.components` with the same specificity, and select.css's block always comes
           after this file, which it imports. */
        select[data-md-field-control]::picker(select) {
            appearance: base-select;
        }

        /* The menu. The browser anchors it to the select; the select covers its whole
           field (field.css), so the menu is at least the field's width. It hangs under
           the field and goes above only when it does not fit there — the browser's own
           order tries the roomier side first, which opened a menu upwards with room to
           spare under it. It opens with a fade and a grow on the spatial spring and
           closes with a fade, as `<x-menu>` does. */
        select[data-md-field-control]::picker(select) {
            position-try-order: normal;
            max-block-size: 18rem;
            max-inline-size: calc(100vw - 32px);
            margin-block: var(--md-sys-measurement-space50);
            padding-block: var(--md-sys-measurement-space100);
            border-width: 0;
            border-radius: var(--md-sys-shape-corner-xs);
            background-color: var(--md-sys-color-surface-container);
            color: var(--md-sys-color-on-surface);
            box-shadow: var(--md-sys-elevation-2);
            opacity: 0;
            transform-origin: top;
            transition-property: opacity, display, overlay;
            transition-duration: var(--md-sys-motion-effects-fast-duration);
            transition-timing-function: var(--md-sys-motion-effects-fast);
            transition-behavior: allow-discrete;
        }

        select[data-md-field-control]:open::picker(select) {
            opacity: 1;
            transition-property: opacity, scale, display, overlay;
            transition-duration: var(--md-sys-motion-spatial-fast-duration);
            transition-timing-function: var(--md-sys-motion-spatial-fast);
        }

        @starting-style {
            select[data-md-field-control]:open::picker(select) {
                opacity: 0;
                scale: 0.95;
            }
        }

        select[data-md-field-control] option {
            display: flex;
            align-items: center;
            gap: 12px;
            min-block-size: var(--md-sys-measurement-space600);
            padding-block: 0;
            padding-inline: var(--md-sys-measurement-space200);
            background-color: transparent;
            color: var(--md-sys-color-on-surface);
            font: var(--md-sys-typescale-body-lg);
            letter-spacing: var(--md-sys-typescale-body-lg-tracking);
            font-variation-settings: normal;
            outline: none;
            cursor: pointer;
        }

        @media (hover: hover) {
            select[data-md-field-control] option:hover {
                background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
            }
        }

        select[data-md-field-control] option:focus-visible {
            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
        }

        select[data-md-field-control] option:checked {
            background-color: var(--md-sys-color-secondary-container);
            color: var(--md-sys-color-on-secondary-container);
        }

        @media (hover: hover) {
            select[data-md-field-control] option:checked:hover {
                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
            }
        }

        select[data-md-field-control] option:checked:focus-visible {
            background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 10%, var(--md-sys-color-secondary-container));
        }

        select[data-md-field-control] option:disabled {
            background-color: transparent;
            color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
            cursor: default;
        }

        /* The tick, at the row's end: the browser draws it before the label, and hides
           it on every row but the chosen one. The Material Symbol, as a mask, so it
           takes the row's ink. */
        select[data-md-field-control] option::checkmark {
            content: "";
            order: 1;
            flex: none;
            inline-size: var(--md-sys-measurement-space300);
            block-size: var(--md-sys-measurement-space300);
            margin-inline-start: auto;
            background-color: currentColor;
            mask: url("../../svg/symbols/outlined/check.svg") center / contain no-repeat;
        }
    }
}