/*
 * Gap and padding, the two spacing props of the layout components, on M3's measurement scale.
 *
 * Both take only a token's name — `data-md-gap="space200"`, `data-md-padding="space300"` — and the
 * value is that token, `--md-sys-measurement-space200` (docs/reference/m3/styles-supplement.md
 * § Spacing; resources/css/tokens/spacing.css). A name the scale does not have renders as `none`
 * (src/Support/Layout.php): no gap, and no padding.
 *
 * A gap is written to `--md-gap`, not to `gap` itself: the stack, row, grid and feed read it (a
 * grid also counts it into a column's width), and each resets it on itself at zero specificity, so
 * an arrangement nested in another never inherits its parent's gap. Padding goes on directly.
 *
 * In `material.layout`, under every component.
 */

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

@layer material.layout {
    [data-md-gap='none'] {
        --md-gap: 0px;
    }

    [data-md-gap='space25'] {
        --md-gap: var(--md-sys-measurement-space25);
    }

    [data-md-gap='space50'] {
        --md-gap: var(--md-sys-measurement-space50);
    }

    [data-md-gap='space75'] {
        --md-gap: var(--md-sys-measurement-space75);
    }

    [data-md-gap='space100'] {
        --md-gap: var(--md-sys-measurement-space100);
    }

    [data-md-gap='space125'] {
        --md-gap: var(--md-sys-measurement-space125);
    }

    [data-md-gap='space200'] {
        --md-gap: var(--md-sys-measurement-space200);
    }

    [data-md-gap='space300'] {
        --md-gap: var(--md-sys-measurement-space300);
    }

    [data-md-gap='space400'] {
        --md-gap: var(--md-sys-measurement-space400);
    }

    [data-md-gap='space500'] {
        --md-gap: var(--md-sys-measurement-space500);
    }

    [data-md-gap='space600'] {
        --md-gap: var(--md-sys-measurement-space600);
    }

    [data-md-gap='space700'] {
        --md-gap: var(--md-sys-measurement-space700);
    }

    [data-md-gap='space800'] {
        --md-gap: var(--md-sys-measurement-space800);
    }

    [data-md-gap='space900'] {
        --md-gap: var(--md-sys-measurement-space900);
    }

    [data-md-padding='space25'] {
        padding: var(--md-sys-measurement-space25);
    }

    [data-md-padding='space50'] {
        padding: var(--md-sys-measurement-space50);
    }

    [data-md-padding='space75'] {
        padding: var(--md-sys-measurement-space75);
    }

    [data-md-padding='space100'] {
        padding: var(--md-sys-measurement-space100);
    }

    [data-md-padding='space125'] {
        padding: var(--md-sys-measurement-space125);
    }

    [data-md-padding='space200'] {
        padding: var(--md-sys-measurement-space200);
    }

    [data-md-padding='space300'] {
        padding: var(--md-sys-measurement-space300);
    }

    [data-md-padding='space400'] {
        padding: var(--md-sys-measurement-space400);
    }

    [data-md-padding='space500'] {
        padding: var(--md-sys-measurement-space500);
    }

    [data-md-padding='space600'] {
        padding: var(--md-sys-measurement-space600);
    }

    [data-md-padding='space700'] {
        padding: var(--md-sys-measurement-space700);
    }

    [data-md-padding='space800'] {
        padding: var(--md-sys-measurement-space800);
    }

    [data-md-padding='space900'] {
        padding: var(--md-sys-measurement-space900);
    }
}