// Counters are rounded-corner badges for numbers
.Counter {
  display: inline-block;
  // stylelint-disable-next-line primer/spacing
  padding: 2px 5px;
  font-size: $font-size-small;
  font-weight: $font-weight-bold;
  line-height: $lh-condensed-ultra;
  color: $text-gray;
  // stylelint-disable-next-line primer/colors
  background-color: rgba($black, 0.08);
  // stylelint-disable-next-line primer/borders
  border-radius: 20px;

  &:empty {
    visibility: hidden;
  }
}

.Counter--gray-light {
  color: $text-gray-dark;
  // stylelint-disable-next-line primer/colors
  background-color: $black-fade-15;
}

.Counter--gray {
  color: $text-white;
  // stylelint-disable-next-line primer/colors
  background-color: $gray;
}