/*
 * <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.
 *
 * 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);

        position: relative;
        isolation: isolate;
        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;
        outline: none;
        -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;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            background-color: currentColor;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
        }

        @media (hover: hover) {
            &:hover::before {
                opacity: var(--md-sys-state-hover-state-layer-opacity);
            }
        }

        &:focus-visible {
            outline: 3px solid var(--md-sys-color-secondary);
            outline-offset: 2px;
        }

        &:focus-visible::before {
            opacity: var(--md-sys-state-focus-state-layer-opacity);
        }

        &:active::before {
            opacity: var(--md-sys-state-pressed-state-layer-opacity);
        }

        @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);
    }
}