@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;

.statCard {
  &__header {
    @include flex-between;
    margin-bottom: $spacing-base;
  }

  &__title {
    font-size: $font-size-sm;
    color: $text-secondary;
  }

  &__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  &__value {
    @include flex-start;
    align-items: baseline;
    gap: $spacing-xs;
    margin-bottom: $spacing-sm;
  }

  &__number {
    font-family: $font-family-number;
    font-size: $font-size-display;
    font-weight: $font-weight-bold;
    color: $text-primary;
    line-height: 1;
  }

  &__suffix {
    font-size: $font-size-sm;
    color: $text-secondary;
  }

  &__change {
    @include flex-start;
    gap: $spacing-xs;
    font-size: $font-size-xs;

    &--up {
      color: $increase-color;
    }

    &--down {
      color: $decrease-color;
    }
  }

  &__arrow {
    font-weight: $font-weight-bold;
  }

  &__period {
    color: $text-disabled;
    margin-left: $spacing-xs;
  }
}
