/*
 * The transitions an action runs between its states — buttons, connected segments, menu items,
 * the FAB menu's trigger.
 *
 * 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-fast` is the press/hover/select transition of a control the finger lands on:
 * shape and size on the fast spatial spring, colour and elevation on the fast effects spring.
 * `state-transition-default` is the same pair one step slower, for the bigger morph of a FAB
 * turning into a close button.
 *
 * Unlayered, as the rest of the package's component CSS, so a `transition-*` utility on the call
 * site cannot half-undo one.
 */

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

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