/*
 * <x-empty-state>: "you have nothing here yet" — not an M3 component; built from M3 Expressive's
 * parts, a shape in secondary-container behind an icon in on-secondary-container, a title-large
 * title, body-medium description at 448px and a centred row of actions.
 *
 * The shape is `position: absolute`, so the icon needs its own stacking context
 * (`position: relative`) to paint above it in DOM order rather than losing to the shape's own —
 * an application's illustration slot replaces both and sizes itself.
 */

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

@import './icon.css';
@import './shape.css';

@layer material.components {
    [data-md-empty-state] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--md-sys-measurement-space200);
        padding-inline: var(--md-sys-measurement-space200);
        padding-block: var(--md-sys-measurement-space500);
        text-align: center;
    }

    [data-md-empty-state-illustration] {
        position: relative;
        display: grid;
        width: 112px;
        height: 112px;
        place-items: center;
    }

    [data-md-empty-state-shape] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        color: var(--md-sys-color-secondary-container);
    }

    [data-md-empty-state-icon] {
        position: relative;
        color: var(--md-sys-color-on-secondary-container);
    }

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

    [data-md-empty-state-description] {
        max-width: 448px;
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-body-md);
        letter-spacing: var(--md-sys-typescale-body-md-tracking);
        font-variation-settings: normal;
    }

    [data-md-empty-state-actions] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        padding-top: var(--md-sys-measurement-space100);
    }
}