// Counters are rounded-corner badges for numbers
.Counter {
  display: inline-block;
  min-width: 20px; // makes sure it's a circle with just one digit
  // stylelint-disable-next-line primer/spacing
  padding: 0 6px;
  font-size: $font-size-small;
  font-weight: $font-weight-semibold;
  // stylelint-disable-next-line primer/typography
  line-height: 20px;
  color: $text-gray-dark;
  text-align: center;
  // stylelint-disable-next-line primer/colors
  background-color: rgba($gray-200, 0.5);
  // stylelint-disable-next-line primer/borders
  border-radius: 2em;

  &:empty {
    visibility: hidden;
  }

  .octicon {
    opacity: 0.5;
  }
}

.Counter--gray-light {
  color: $text-gray-light;
}

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

// Counters are rounded-corner badges for numbers
.Counter {
  display: inline-block;
  min-width: $size-2; // makes sure it's a circle with just one digit
  // stylelint-disable-next-line primer/spacing
  padding: 0 6px;
  font-size: $font-size-small;
  font-weight: $font-weight-semibold;
  // stylelint-disable-next-line primer/typography
  line-height: $size-2;
  color: $text-gray-dark;
  text-align: center;
  // stylelint-disable-next-line primer/colors
  background-color: rgba($gray-200, 0.5);
  // stylelint-disable-next-line primer/borders
  border-radius: 2em;

  &:empty {
    visibility: hidden;
  }

  .octicon {
    opacity: 0.5;
  }
}

.Counter--gray-light {
  color: $text-gray-light;
}

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

Use size scale for .Counter
Use size scale for .Counter
