/*
 * What is left of the Tailwind-era actions utilities, waiting on the FAB menu's own rewrite (plan
 * step 36, actions): `<x-fab-menu>`'s trigger still names `state-transition-default`, and its
 * list still selects `[data-fab-menu]`. Once that component moves into fab-menu.css, in
 * `material.components`, this file empties and leaves tailwind.css.
 *
 * M3 has two spring styles and they are not interchangeable: spatial moves things (position,
 * size, rotation, rounded corners) and overshoots by 9% on the way, effects changes how things
 * look (colour, opacity, elevation) and is critically damped, because a colour must never
 * overshoot — tokens/motion.css says so in the library's own words. An element whose corners and
 * colours both change on a press therefore needs two springs at once, which Tailwind cannot write
 * (`duration-*` and `ease-*` each emit one value); CSS can, by giving `transition-property` a
 * list and matching it position for position.
 *
 * `state-transition-default` is the FAB menu trigger's morph into a close button: shape, size and
 * position on the default spatial spring, colour and elevation on the default effects spring
 * beside it.
 *
 * This is an `@utility` declaration, so it compiles into Tailwind's utilities layer like any
 * other class: a `transition-*` utility written beside it on the call site will fight it, and
 * whichever Tailwind emits last wins. Pass neither.
 */

@utility state-transition-default {
    transition-property: border-radius, padding, margin, background-color, color, box-shadow;
    transition-duration:
        var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration), var(--md-sys-motion-spatial-default-duration),
        var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-effects-default-duration), var(--md-sys-motion-effects-default-duration);
    transition-timing-function:
        var(--md-sys-motion-spatial-default), var(--md-sys-motion-spatial-default), var(--md-sys-motion-spatial-default),
        var(--md-sys-motion-effects-default), var(--md-sys-motion-effects-default), var(--md-sys-motion-effects-default);
}

/*
 * A FAB menu's items rise into place as the list opens and sink back as it closes. 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 is what `:not(:popover-open)` is — the popover keeps `display: flex`
 * for the length of its own discrete transition, so the items have somewhere to animate to.
 *
 * Unlayered (a plain rule, not an `@utility`), so it beats the item's own utilities.
 */
[data-fab-menu]:not(:popover-open) > * {
    translate: 0 0.5rem;
    opacity: 0;
}