@use '../utils/size_variables';

/**
 * Copyright IBM Corp. 2016, 2025
 * SPDX-License-Identifier: BUSL-1.1
 */

.stat-text-container {
  line-height: normal;
  max-height: 100%;
  display: flex;
  flex-direction: column;

  &.l,
  &.m {
    .stat-label {
      font-size: var(--token-typography-body-300-font-size);
      font-weight: var(--token-typography-font-weight-semibold);
      margin-bottom: size_variables.$spacing-4;
      line-height: inherit;
    }
    .stat-text {
      font-size: var(--token-typography-body-200-font-size);
      font-weight: var(--token-typography-font-weight-regular);
      color: var(--token-color-foreground-faint);
      line-height: inherit;
    }
    .stat-value {
      font-size: size_variables.$size-3;
      font-weight: var(--token-typography-font-weight-regular);
      margin-top: size_variables.$spacing-12;
    }
  }

  &.s {
    .stat-label {
      font-size: size_variables.$size-5;
      font-weight: var(--token-typography-font-weight-semibold);
      line-height: inherit;
    }
    .stat-text {
      font-size: var(--token-typography-body-200-font-size);
      font-weight: var(--token-typography-font-weight-regular);
      color: var(--token-color-foreground-faint);
      line-height: inherit;
    }
    .stat-value {
      font-size: size_variables.$size-5;
      font-weight: var(--token-typography-font-weight-regular);
      margin-top: size_variables.$spacing-12;
    }
  }

  &.l-no-subText {
    .stat-label {
      font-size: size_variables.$size-5;
      font-weight: var(--token-typography-font-weight-semibold);
      line-height: inherit;
    }
    .stat-text {
      font-size: var(--token-typography-body-200-font-size);
      font-weight: var(--token-typography-font-weight-regular);
      color: var(--token-color-foreground-faint);
      line-height: inherit;
    }
    .stat-value {
      font-size: size_variables.$size-3;
      font-weight: var(--token-typography-font-weight-regular);
      margin-top: size_variables.$spacing-4;
    }
  }

  &.m-no-subText {
    .stat-label {
      font-size: var(--token-typography-body-200-font-size);
      font-weight: var(--token-typography-font-weight-bold);
      line-height: inherit;
    }
    .stat-text {
      font-size: var(--token-typography-body-200-font-size);
      font-weight: var(--token-typography-font-weight-regular);
      color: var(--token-color-foreground-faint);
      line-height: inherit;
    }
    .stat-value {
      font-size: size_variables.$size-5;
      font-weight: var(--token-typography-font-weight-regular);
      margin-top: size_variables.$spacing-4;
    }
  }

  &.s-no-subText {
    .stat-label {
      font-size: var(--token-typography-body-200-font-size);
      font-weight: var(--token-typography-font-weight-regular);
      color: var(--token-color-palette-neutral-400);
      line-height: inherit;
    }
    .stat-text {
      font-size: var(--token-typography-body-200-font-size);
      font-weight: var(--token-typography-font-weight-regular);
      color: var(--token-color-foreground-faint);
      line-height: inherit;
    }
    .stat-value {
      font-size: var(--token-typography-body-200-font-size);
      font-weight: var(--token-typography-font-weight-regular);
      color: var(--token-color-foreground-primary);
      line-height: inherit;
    }
  }
}
