/**
 * Styling for the data point module.
 */

.data-point {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    align-items: center;
    font: var(--font-copy-lg);
    text-align: center;
}
.counter-module.brand-black .data-point {
    color: var(--color-grey-250);
}
.counter-module.brand-red .data-point {
    color: var(--color-grey-150);
}
.theme-dark .counter-module.brand-black .data-point {
    color: var(--color-grey-850);
}
.theme-dark .counter-module.brand-red .data-point {
    color: var(--color-grey-950);
}

.data-point .value {
    font: var(--font-data-zero);
    color: var(--color-primary-red-500);
}
.counter-module.brand-black .data-point .value,
.counter-module.brand-red .data-point .value {
    color: var(--color-grey-50);
}
.counter-module.brand-red.loading .data-point .value.skeleton {
    --skeleton-bg: var(--color-primary-red-400);
    --shine-colour: rgba(172, 0, 0, 0.3);
}
.theme-dark .counter-module.brand-red.loading .data-point .value.skeleton {
    --skeleton-bg: var(--color-primary-red-500);
}
.theme-dark .counter-module.brand-black .data-point .value,
.theme-dark .counter-module.brand-red .data-point .value {
    color: var(--color-grey-1000);
}