/*
 * <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).
 *
 * `interpolate-size: allow-keywords` makes `<details>`'s `0 -> auto` block-size an animatable pair,
 * so `::details-content` (the pseudo-element that holds everything after the summary) can transition
 * `block-size` on the fast spatial spring, the same one that turns the chevron; `content-visibility`
 * goes with it, `allow-discrete`, so the content stays rendered while it closes rather than
 * vanishing on the first frame. Under reduced motion the duration token is zero
 * (tokens/motion.css), so the section snaps open with nothing else to do.
 *
 * `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] {
        interpolate-size: allow-keywords;
    }

    [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]::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-md-collapse][open]::details-content {
        block-size: auto;
    }

    [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] > [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);
    }
}