/*
 * <x-alert>: a notice in the page — not an M3 component (M3's banner is gone), drawn in M3's own
 * terms as the plan's deliberate-deviations note records: the state's container colour (tinted,
 * never filled), a medium corner, the state's icon, title-small/body-medium text and an actions
 * row of text buttons pulled back 12px to the text's edge, as the rich tooltip's actions row is
 * (rich-tooltip.css).
 *
 * `data-md-color`: info (the default), success, warning, error, primary, secondary, tertiary or
 * neutral (surface-container-high, on-surface — it has no state colour of its own). The dismiss
 * button is drawn at 40px, pulled 8px out into the alert's padding, and renders the foundation's
 * `md-state-layer`, `md-focus-ring` and `md-touch-target` (foundation/interaction.css) to reach
 * M3's 48px target (ACT-18); nothing here copies their rules.
 */

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

@import './icon.css';

@layer material.components {
    [data-md-alert] {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        border-radius: var(--md-sys-shape-corner-md);
        padding: var(--md-sys-measurement-space200);
        background-color: var(--md-sys-color-info-container);
        color: var(--md-sys-color-on-info-container);
    }

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

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

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

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

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

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

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

    [data-md-alert-content] {
        min-width: 0;
        flex: 1;
        align-self: center;
    }

    [data-md-alert-content] > * + * {
        margin-top: var(--md-sys-measurement-space50);
    }

    [data-md-alert-title] {
        font: var(--md-sys-typescale-title-sm);
        letter-spacing: var(--md-sys-typescale-title-sm-tracking);
        font-variation-settings: normal;
    }

    [data-md-alert-description] {
        font: var(--md-sys-typescale-body-md);
        letter-spacing: var(--md-sys-typescale-body-md-tracking);
        font-variation-settings: normal;
    }

    [data-md-alert-actions] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--md-sys-measurement-space100);
        margin-inline-start: -12px;
        padding-top: var(--md-sys-measurement-space50);
    }

    [data-md-alert-dismiss] {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: var(--md-sys-measurement-space500);
        height: var(--md-sys-measurement-space500);
        margin: -8px;
        border-radius: var(--md-sys-shape-corner-full);
        cursor: pointer;
    }
}