@use "scss/variables";
@use "scss/colors";
@use "scss/mixins";

$sm-width: 14px;
$md-width: 20px;
$lg-width: 46px;

// sizes

.sm {
  font-size: 12px;

  & .icon {
    width: $sm-width;
    height: $sm-width;
  }

  & .value {
    padding-right: variables.$spacing-xs;
  }

  &.loading {
    gap: variables.$spacing-xs;
  }

  &.withValue {
    padding: 0 2px;
  }
}

.md {
  font-size: 20px;

  & .icon {
    width: $md-width;
    height: $md-width;
  }

  & .value {
    padding-right: variables.$spacing-sm;
  }

  &.loading {
    gap: variables.$spacing-sm;
  }

  &.withValue {
    padding: 0 variables.$spacing-xs;
  }
}

.lg {
  font-size: 24px;

  & .icon {
    width: $lg-width;
    height: $lg-width;
  }

  & .value {
    padding-right: variables.$spacing-md;
  }

  &.loading {
    gap: variables.$spacing-md;
  }

  &.withValue {
    padding: 0 variables.$spacing-sm;
  }
}

.container {
  border-radius: variables.$border-radius-pill;
  color: colors.$foreground;
  width: fit-content;

  & .value {
    color: inherit;
    font-size: inherit;
  }

  &.loading {
    & .icon {
      padding: 0;
    }

    & .value {
      color: colors.$blue;
    }
  }
}

// backgrounds

.success {
  color: colors.$green;
}

.warning {
  color: colors.$yellow;
}

.error {
  color: colors.$red;
}

.default {
  color: colors.$grey;
}

.none {
  color: none;
}
