livewire-material/resources/css/components/alert.css

/*
 * <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 reaches M3's 48px target
 * (ACT-18) through an `::after`. Its state layer, focus ring and target are the declarations of
 * the foundation's `md-state-layer`, `md-focus-ring` and `md-touch-target`
 * (foundation/interaction.css), keyed on the button itself as button.css does, because the view
 * writes no class list.
 */

@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] {
        position: relative;
        isolation: isolate;
        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;
        outline: none;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            background-color: currentColor;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
        }

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            min-width: var(--md-sys-measurement-space600);
            min-height: var(--md-sys-measurement-space600);
            translate: -50% -50%;
        }

        @media (hover: hover) {
            &:hover::before {
                opacity: var(--md-sys-state-hover-state-layer-opacity);
            }
        }

        &:focus-visible {
            outline: 3px solid var(--md-sys-color-secondary);
            outline-offset: 2px;
        }

        &:focus-visible::before {
            opacity: var(--md-sys-state-focus-state-layer-opacity);
        }

        &:active::before {
            opacity: var(--md-sys-state-pressed-state-layer-opacity);
        }
    }
}