/*
 * The colour-role table M3's semantic colours share, so a component that offers the same set of
 * roles does not repeat it: `data-md-color` picks primary (most components' default, drawn
 * without the attribute), secondary, tertiary, error, success, warning or info, and this sets the
 * four generic variables a component's own stylesheet reads — `--md-color`/`--md-on-color` the
 * role itself, `--md-container`/`--md-on-container` its tonal container.
 *
 * A component gives its own prefixed variables (`--md-badge-color`, …) a fallback of its default
 * role, `var(--md-color, var(--md-sys-color-<default>))`, so the generic ones only take over once
 * `data-md-color` is actually written on that element. The four are registered as not inheriting,
 * so a component inside a coloured one (a badge on an error button) still falls back to its own
 * default rather than taking its ancestor's role. A component whose primary
 * deliberately reads secondary-container instead of primary-container (button.css, slider.css,
 * progress.css) keeps a small override of its own for an explicit `data-md-color="primary"` too:
 * this file's `primary` entry is the plain M3 mapping every other role, and every other component,
 * wants.
 *
 * A component that supports only part of this set (fab.css's primary/secondary/tertiary) does not
 * import this file: wiring it in would make every role it leaves out suddenly take effect through
 * the bare `[data-md-color]` selector below, a behaviour change rather than a rewrite.
 */

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

@layer material.components {
    @property --md-color {
        syntax: '*';
        inherits: false;
    }

    @property --md-on-color {
        syntax: '*';
        inherits: false;
    }

    @property --md-container {
        syntax: '*';
        inherits: false;
    }

    @property --md-on-container {
        syntax: '*';
        inherits: false;
    }

    [data-md-color='primary'] {
        --md-color: var(--md-sys-color-primary);
        --md-on-color: var(--md-sys-color-on-primary);
        --md-container: var(--md-sys-color-primary-container);
        --md-on-container: var(--md-sys-color-on-primary-container);
    }

    [data-md-color='secondary'] {
        --md-color: var(--md-sys-color-secondary);
        --md-on-color: var(--md-sys-color-on-secondary);
        --md-container: var(--md-sys-color-secondary-container);
        --md-on-container: var(--md-sys-color-on-secondary-container);
    }

    [data-md-color='tertiary'] {
        --md-color: var(--md-sys-color-tertiary);
        --md-on-color: var(--md-sys-color-on-tertiary);
        --md-container: var(--md-sys-color-tertiary-container);
        --md-on-container: var(--md-sys-color-on-tertiary-container);
    }

    [data-md-color='error'] {
        --md-color: var(--md-sys-color-error);
        --md-on-color: var(--md-sys-color-on-error);
        --md-container: var(--md-sys-color-error-container);
        --md-on-container: var(--md-sys-color-on-error-container);
    }

    [data-md-color='success'] {
        --md-color: var(--md-sys-color-success);
        --md-on-color: var(--md-sys-color-on-success);
        --md-container: var(--md-sys-color-success-container);
        --md-on-container: var(--md-sys-color-on-success-container);
    }

    [data-md-color='warning'] {
        --md-color: var(--md-sys-color-warning);
        --md-on-color: var(--md-sys-color-on-warning);
        --md-container: var(--md-sys-color-warning-container);
        --md-on-container: var(--md-sys-color-on-warning-container);
    }

    [data-md-color='info'] {
        --md-color: var(--md-sys-color-info);
        --md-on-color: var(--md-sys-color-on-info);
        --md-container: var(--md-sys-color-info-container);
        --md-on-container: var(--md-sys-color-on-info-container);
    }
}