/*
 * `<x-collapse>`'s height, eased open.
 *
 * The native `<details>` opens and closes by itself; what it cannot do on its own is animate, so
 * the component sets `interpolate-size: allow-keywords` (which makes `0` → `auto` an animatable
 * pair) and this transitions `block-size` on `::details-content`, the pseudo-element that holds
 * everything after the `<summary>`. `content-visibility` goes with it, `allow-discrete`, so the
 * content stays rendered while it closes rather than vanishing on the first frame.
 *
 * The fast spatial spring, as the chevron beside it: M3's spatial track is for anything that
 * changes size or position. Under reduced motion the duration token is zero
 * (resources/css/tokens/motion.css), so the section snaps open with nothing else to do.
 *
 * Not an M3 component — M3 has expandable list items and menu expansion, no standalone disclosure
 * — so the geometry is the library's and only the motion tokens are M3's.
 */

@layer components {
    [data-collapse]::details-content {
        block-size: 0;
        overflow: hidden;
        transition:
            block-size var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast),
            content-visibility var(--md-sys-motion-spatial-fast-duration) allow-discrete;
    }

    [data-collapse][open]::details-content {
        block-size: auto;
    }
}