/*
 * <x-collapse>: not an M3 component — M3 has expandable list items and menu expansion but no
 * standalone disclosure — built on the native `<details>` so it opens without script, keeps its
 * state through a Livewire morph, and is announced as a disclosure by the browser. Judged against
 * foundations rather than any M3 component spec (docs/audits/m3-alignment/containment.md, C-24).
 *
 * The height eases open and shut on the fast spatial spring, the same one that turns the chevron,
 * from resources/js/collapse.js: it animates the `<details>`' own `block-size`. This file cannot —
 * `interpolate-size` (for `0 -> auto`) is Chrome's alone, and Firefox does not hold the content's
 * `content-visibility` through a close — so Firefox and Safari used to snap open and shut. While a
 * close runs, `open` is still set and `data-md-collapse-closing` turns the chevron back at its
 * start. Under reduced motion the duration token is zero (tokens/motion.css), and the section
 * snaps, as the browser draws it.
 *
 * `data-md-variant="filled"` is a surface-container tile with a large corner; the summary inherits
 * it (`border-radius: inherit`) so the shared `md-state-layer`'s own `::before`, which also
 * inherits, draws inside the same shape. `md-state-layer` and `md-focus-ring`
 * (foundation/interaction.css) sit on the summary; this file only refines their target — the
 * 48px summary height, the icon and chevron colour — never their opacities or ring.
 *
 * Icon-to-title and title-to-chevron gaps are a literal 12px: the measurement scale has no 12
 * (`space125` is 10px), as alert.css's gap. Every part is matched as its own `<details>`' child, so
 * a collapse nested in a filled one takes neither its padding nor its turned chevron.
 */

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

@import './icon.css';

@layer material.components {
    [data-md-collapse][data-md-variant='filled'] {
        border-radius: var(--md-sys-shape-corner-lg);
        background-color: var(--md-sys-color-surface-container);
    }

    [data-md-collapse-summary] {
        display: flex;
        min-block-size: var(--md-sys-measurement-space600);
        align-items: center;
        gap: 12px;
        border-radius: inherit;
        cursor: pointer;
        list-style-type: none;
        font: var(--md-sys-typescale-title-md);
        letter-spacing: var(--md-sys-typescale-title-md-tracking);

        &::-webkit-details-marker {
            display: none;
        }
    }

    [data-md-collapse][data-md-variant='filled'] > [data-md-collapse-summary] {
        padding-inline: var(--md-sys-measurement-space200);
    }

    [data-md-collapse-icon] {
        color: var(--md-sys-color-on-surface-variant);
    }

    [data-md-collapse-title] {
        min-width: 0;
        flex: 1 1 0%;
    }

    [data-md-collapse-chevron] {
        color: var(--md-sys-color-on-surface-variant);
        transition: rotate var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
    }

    [data-md-collapse][open]:not([data-md-collapse-closing]) > [data-md-collapse-summary] > [data-md-collapse-chevron] {
        rotate: 180deg;
    }

    [data-md-collapse-body] {
        padding-block: var(--md-sys-measurement-space50) var(--md-sys-measurement-space200);
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-body-md);
        letter-spacing: var(--md-sys-typescale-body-md-tracking);
    }

    [data-md-collapse][data-md-variant='filled'] > [data-md-collapse-body] {
        padding-inline: var(--md-sys-measurement-space200);
    }
}