/*
 * <x-fab-menu-item>: one action in an `<x-fab-menu>`, a pill that rises into place as the menu
 * opens and sinks back as it closes.
 *
 * FabMenuBaselineTokens (androidx Compose Material 3, Apache-2.0): 56px tall, 24px either side,
 * 8px between the icon and the label, 24px icons, full corner, elevation 3, `data-md-color`'s
 * container. It renders the foundation's `md-state-layer` and `md-focus-ring`
 * (foundation/interaction.css); its 56px already meets M3's target, so it needs no
 * `md-touch-target`.
 *
 * The entry is `@starting-style` on the item itself; the exit needs the state to be readable
 * while the popover is on its way out, which `[data-md-fab-menu-popover]:not(:popover-open) > *`
 * (fab-menu.css) drives from the popover's own open state — the popover keeps `display: flex` for
 * the length of its own discrete transition, so the item has somewhere to animate to (ACT-33).
 */

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

@import './icon.css';

@layer material.components {
    [data-md-fab-menu-item] {
        --md-fab-menu-item-container: var(--md-sys-color-primary-container);
        --md-fab-menu-item-on-container: var(--md-sys-color-on-primary-container);

        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        gap: var(--md-sys-measurement-space100);
        block-size: var(--md-sys-measurement-space700);
        padding-inline: var(--md-sys-measurement-space300);
        border-radius: var(--md-sys-shape-corner-full);
        background-color: var(--md-fab-menu-item-container);
        color: var(--md-fab-menu-item-on-container);
        box-shadow: var(--md-sys-elevation-3);
        white-space: nowrap;
        font: var(--md-sys-typescale-title-md);
        letter-spacing: var(--md-sys-typescale-title-md-tracking);
        font-variation-settings: normal;
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        translate: 0 0;
        opacity: 1;
        transition-property: translate, opacity, display, overlay;
        transition-duration:
            var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-effects-default-duration),
            var(--md-sys-motion-spatial-fast-duration), var(--md-sys-motion-spatial-fast-duration);
        transition-timing-function:
            var(--md-sys-motion-spatial-fast), var(--md-sys-motion-effects-default), linear, linear;
        transition-behavior: allow-discrete;

        @starting-style {
            translate: 0 var(--md-sys-measurement-space100);
            opacity: 0;
        }
    }

    [data-md-fab-menu-item][data-md-color='secondary'] {
        --md-fab-menu-item-container: var(--md-sys-color-secondary-container);
        --md-fab-menu-item-on-container: var(--md-sys-color-on-secondary-container);
    }

    [data-md-fab-menu-item][data-md-color='tertiary'] {
        --md-fab-menu-item-container: var(--md-sys-color-tertiary-container);
        --md-fab-menu-item-on-container: var(--md-sys-color-on-tertiary-container);
    }
}