/* ==========================================================================
   Variables
   ========================================================================== */

.ts-statistic {
    --accent-color: initial;
    --accent-foreground-color: initial;
}

/* ==========================================================================
   Base
   ========================================================================== */

.ts-statistic {
    display: flex;
    color: inherit;
    gap: 0.5rem;
    align-items: center;
}

/* ==========================================================================
   Structure
   ========================================================================== */

.ts-statistic .value {
    display: inline-flex;
    font-size: var(--ts-relative-massive);
    font-weight: 500;
    line-height: 1.4;
    align-items: center;
    color: var(--accent-color, inherit);
}

.ts-statistic .unit {
    font-size: var(--ts-relative-medium);
    color: var(--ts-gray-600);
}

.ts-statistic .comparison {
    font-size: var(--ts-relative-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-gray-600);
}

.ts-statistic .comparison::before {
    font-family: "Icons";
    margin-right: 0.35rem;
    margin-top: 2px;
    font-size: 1rem;
}

.ts-statistic .ts-icon {
    font-size: var(--ts-relative-massive);
    margin-right: 0.5rem;
}

/* ==========================================================================
   Variations
   ========================================================================== */

/**
 * Aligns
 */

.ts-statistic.is-start-aligned > .value {
    justify-content: flex-start;
}

.ts-statistic.is-center-aligned > .value {
    justify-content: center;
}

/**
 * Centered
 */

.ts-statistic.is-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

/**
 * Text
 */

.ts-statistic > .value.is-text {
    font-size: 1em;
    min-height: calc(2.125rem + 0.3rem);
}

/**
 * Comparisons
 */

.ts-statistic .comparison.is-increased::before {
    content: "\f0d8";
}

.ts-statistic .comparison.is-decreased::before {
    content: "\f0d7";
}

.ts-statistic.is-increased .value::before,
.ts-statistic.is-decreased .value::before {
    font-family: "Icons";
    margin-right: 0.5rem;
}

.ts-statistic.is-increased .value::before {
    content: "\f0d8";
}

.ts-statistic.is-decreased .value::before {
    content: "\f0d7";
}

/**
 * Fluid
 */

.ts-statistic.is-fluid {
    width: 100%;
}

/**
 * Sizes
 */

.ts-statistic.is-mini.is-mini.is-mini {
    font-size: 0.8125rem;
}

.ts-statistic.is-tiny.is-tiny.is-tiny {
    font-size: 0.875rem;
}

.ts-statistic.is-small.is-small.is-small {
    font-size: 0.9375rem;
}

.ts-statistic.is-large.is-large.is-large {
    font-size: 1.125rem;
}

.ts-statistic.is-big.is-big.is-big {
    font-size: 1.375rem;
}

.ts-statistic.is-huge.is-huge.is-huge {
    font-size: 1.75rem;
}

.ts-statistic.is-massive.is-massive.is-massive {
    font-size: 2rem;
}
