/*
 * <x-surface>: a tonal region, M3's surface or one of its container steps.
 *
 * `data-md-level` names the colour role the region is filled with — `surface`, `surface-dim`,
 * `surface-bright`, or `surface-container-lowest` … `surface-container-highest` — and its text is
 * `on-surface`, the role M3 pairs with every one of them (docs/reference/m3/styles.md § Color →
 * surface roles). The container steps are how M3 separates regions without a shadow: a higher step
 * reads as nearer. `data-md-corner` rounds it with a corner token (`xs` … `full`,
 * resources/css/tokens/shape.css), `data-md-padding` pads it with a spacing token (spacing.css),
 * and `data-md-outlined` draws the 1dp outline-variant edge M3 gives an outlined container, for a
 * boundary where the tones alone would be too close.
 *
 * A surface is an edge of its own: a pane or a canonical layout on it keeps its content off the
 * surface's edge by M3's margin again, even inside a region that already drew one (pane.css,
 * `--md-layout-margin`), which `initial` puts back to "not drawn yet".
 *
 * In `material.layout`, under every component, so a component drawn on a surface keeps its own
 * container; `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 {
    [data-md-surface] {
        background-color: var(--md-sys-color-surface-container);
        color: var(--md-sys-color-on-surface);
    }

    [data-md-surface][data-md-level='surface'] {
        background-color: var(--md-sys-color-surface);
    }

    [data-md-surface][data-md-level='surface-dim'] {
        background-color: var(--md-sys-color-surface-dim);
    }

    [data-md-surface][data-md-level='surface-bright'] {
        background-color: var(--md-sys-color-surface-bright);
    }

    [data-md-surface][data-md-level='surface-container-lowest'] {
        background-color: var(--md-sys-color-surface-container-lowest);
    }

    [data-md-surface][data-md-level='surface-container-low'] {
        background-color: var(--md-sys-color-surface-container-low);
    }

    [data-md-surface][data-md-level='surface-container-high'] {
        background-color: var(--md-sys-color-surface-container-high);
    }

    [data-md-surface][data-md-level='surface-container-highest'] {
        background-color: var(--md-sys-color-surface-container-highest);
    }

    [data-md-surface][data-md-corner='none'] {
        border-radius: var(--md-sys-shape-corner-none);
    }

    [data-md-surface][data-md-corner='xs'] {
        border-radius: var(--md-sys-shape-corner-xs);
    }

    [data-md-surface][data-md-corner='sm'] {
        border-radius: var(--md-sys-shape-corner-sm);
    }

    [data-md-surface][data-md-corner='md'] {
        border-radius: var(--md-sys-shape-corner-md);
    }

    [data-md-surface][data-md-corner='lg'] {
        border-radius: var(--md-sys-shape-corner-lg);
    }

    [data-md-surface][data-md-corner='lg-increased'] {
        border-radius: var(--md-sys-shape-corner-lg-increased);
    }

    [data-md-surface][data-md-corner='xl'] {
        border-radius: var(--md-sys-shape-corner-xl);
    }

    [data-md-surface][data-md-corner='xl-increased'] {
        border-radius: var(--md-sys-shape-corner-xl-increased);
    }

    [data-md-surface][data-md-corner='xxl'] {
        border-radius: var(--md-sys-shape-corner-xxl);
    }

    [data-md-surface][data-md-corner='full'] {
        border-radius: var(--md-sys-shape-corner-full);
    }

    [data-md-surface][data-md-outlined] {
        border: 1px solid var(--md-sys-color-outline-variant);
    }

    [data-md-surface] > * {
        --md-layout-margin: initial;
    }
}