@use "../../01-core/prefix" as *;
@use "./stat.mixins" as stat;
@use "../../01-core/external" as *;

@layer ss.components {
    .#{$ss-prefix-module}-stats {
        @include stat.ss-stats;
    }
    .#{$ss-prefix-module}-stats--vertical {
        @include stat.ss-stats-vertical;
    }

    .#{$ss-prefix-module}-stat {
        @include stat.ss-stat;
    }
    .#{$ss-prefix-module}-stat__title {
        @include stat.ss-stat-title;
    }
    .#{$ss-prefix-module}-stat__value {
        @include stat.ss-stat-value;
    }
    .#{$ss-prefix-module}-stat__desc {
        @include stat.ss-stat-desc;
    }
    .#{$ss-prefix-module}-stat__figure {
        @include stat.ss-stat-figure;
    }
    .#{$ss-prefix-module}-stat__actions {
        @include stat.ss-stat-actions;
    }

    // A stat placed straight into an `ss-l-dashboard` (outside `ss-c-stats`)
    // becomes a widget tile: the stats group surface, without the divider
    // between neighbours.
    .#{$ss-prefix-layout}-dashboard > .#{$ss-prefix-module}-stat {
        display: grid;
        background-color: var(--ss-color-surface);
        border: var(--ss-a-border-width-1, #{q(1)}) solid
            var(--ss-color-line-secondary);
        border-radius: var(--ss-radius-md);
        box-shadow: var(--ss-a-shadow-sm);
    }

    // `__label` is the caption under the value (same slot as `__desc`).
    .#{$ss-prefix-module}-stat__label {
        grid-area: desc;
        color: var(--ss-color-text-muted);
    }
}