@use "config";
@use "variables";
@use "sass:map";

.stat {
  $self: &;
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: map.get(variables.$font-scale, "lg");
  font-weight: bold;

  &[data-stat-label]:after {
    content: attr(data-stat-label);
    color: map.get(variables.$greyscale, "base");
    font-size: 1rem;
    font-weight: normal;
  }

  &--sm {
    #{$self}__number {
      font-size: map.get(variables.$font-scale, "md");
    }

    &[data-stat-label]:after {
      font-size: map.get(variables.$font-scale, "xs");
    }
  }

  &--md {
    #{$self}__number {
      font-size: map.get(variables.$font-scale, "xl");
    }
  }

  &--lg {
    #{$self}__number {
      font-size: map.get(variables.$font-scale, "xxl");
    }
  }
}