.badge {
  font-size: $size-7;
  height: 1.5em;
  line-height: 1;
  border-radius: $radius;
  padding: 0.25em 0.75em;

  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      background-color: $color;
      color: $color-invert;

      &.is-faded {
        color: rgba($color-invert, 0.8);
      }

      &.is-hollow {
        box-shadow: 0 0 0 1px $color;
        background: $white;
        color: darken($color, 10%);
      }

      &.is-subtle {
        background: rgba($color, 0.3);
        color: $white;
      }
    }
  }

  &.is-faded {
    color: rgba($text, 0.8);
  }
}