/*
 * <x-row>: its children side by side, in a pane, stacked under one another below a breakpoint.
 *
 * A flex row in the inline direction, so it runs right to left in a right-to-left document, as M3's
 * bidirectionality rules ask of every layout (docs/reference/m3/foundations.md § Layout →
 * Bidirectionality / RTL). Children are centred across the row unless `data-md-align` says
 * `start`, `end`, `stretch` or `baseline`; `data-md-justify` places them along it (`start`,
 * `center`, `end`, `between`); `data-md-wrap` lets them wrap. The space between them is `--md-gap`
 * (spacing.css).
 *
 * `data-md-stack-below` turns the row into a column on a window narrower than the breakpoint it
 * names (M3's, in px: medium 600, expanded 840, large 1200, extra-large 1600) — M3's "reposition"
 * as the window shrinks (§ Layout → Breakpoints). A stacked row stretches its children across its
 * width unless an `align` was given.
 *
 * In `material.layout`; `hide-below`/`hide-from` come from visibility.css.
 */

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

@import './spacing.css';
@import './visibility.css';

@layer material.layout {
    :where([data-md-row]) {
        --md-gap: 0px;
    }

    [data-md-row] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--md-gap);
    }

    [data-md-row][data-md-align='start'] {
        align-items: flex-start;
    }

    [data-md-row][data-md-align='end'] {
        align-items: flex-end;
    }

    [data-md-row][data-md-align='stretch'] {
        align-items: stretch;
    }

    [data-md-row][data-md-align='baseline'] {
        align-items: baseline;
    }

    [data-md-row][data-md-justify='start'] {
        justify-content: flex-start;
    }

    [data-md-row][data-md-justify='center'] {
        justify-content: center;
    }

    [data-md-row][data-md-justify='end'] {
        justify-content: flex-end;
    }

    [data-md-row][data-md-justify='between'] {
        justify-content: space-between;
    }

    [data-md-row][data-md-wrap] {
        flex-wrap: wrap;
    }

    @media (width < 600px) {
        [data-md-row][data-md-stack-below='medium'] {
            flex-direction: column;
        }

        [data-md-row][data-md-stack-below='medium']:not([data-md-align]) {
            align-items: stretch;
        }
    }

    @media (width < 840px) {
        [data-md-row][data-md-stack-below='expanded'] {
            flex-direction: column;
        }

        [data-md-row][data-md-stack-below='expanded']:not([data-md-align]) {
            align-items: stretch;
        }
    }

    @media (width < 1200px) {
        [data-md-row][data-md-stack-below='large'] {
            flex-direction: column;
        }

        [data-md-row][data-md-stack-below='large']:not([data-md-align]) {
            align-items: stretch;
        }
    }

    @media (width < 1600px) {
        [data-md-row][data-md-stack-below='extra-large'] {
            flex-direction: column;
        }

        [data-md-row][data-md-stack-below='extra-large']:not([data-md-align]) {
            align-items: stretch;
        }
    }
}