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

  @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);
  }

  &.is-small {
    padding: 0.15em 0.5em;
  }

  &.is-secondary {
    color: darken($grey-blue, 30%);
    background: lighten($grey-blue, 10%);
  }
}

button.badge {
  cursor: pointer;
}