/*
 * <x-stat>: a figure and what it counts — not an M3 component; drawn in M3's terms, a panel that
 * separates from the page in surface-container, a label-large title beside its icon, the value as
 * an emphasized-headline-md hero with tabular figures (so the panel never reflows as it counts),
 * and a body-small description. resources/js/figure.js counts the value up on first appearance
 * and on every change after, and rests under reduced motion.
 */

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

@import './icon.css';

@layer material.components {
    [data-md-stat] {
        display: flex;
        flex-direction: column;
        gap: var(--md-sys-measurement-space50);
        border-radius: var(--md-sys-shape-corner-lg);
        background-color: var(--md-sys-color-surface-container);
        padding: var(--md-sys-measurement-space200);
    }

    [data-md-stat-header] {
        display: flex;
        align-items: center;
        gap: var(--md-sys-measurement-space100);
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-label-lg);
        letter-spacing: var(--md-sys-typescale-label-lg-tracking);
        font-variation-settings: normal;
    }

    [data-md-stat-value] {
        font: var(--md-sys-typescale-emphasized-headline-md);
        letter-spacing: var(--md-sys-typescale-emphasized-headline-md-tracking);
        font-variation-settings: "ROND" 100;
        font-variant-numeric: tabular-nums;
    }

    [data-md-stat-description] {
        color: var(--md-sys-color-on-surface-variant);
        font: var(--md-sys-typescale-body-sm);
        letter-spacing: var(--md-sys-typescale-body-sm-tracking);
        font-variation-settings: normal;
    }

    [data-md-stat-extra] {
        padding-top: var(--md-sys-measurement-space100);
    }
}