// Rewritten Badges

@mixin badge-variant($bg) {
  color: lighten($bg, 10%);
  background-color: rgba($bg, .2);

  @at-root a#{&} {
    @include hover-focus() {
      color: lighten($bg, 10%);
      background-color: rgba($bg, .4);
    }

    &:focus,
    &.focus {
      outline: 0;
      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
    }
  }
}

@each $color, $value in $theme-colors {
  .badge-#{$color} {
    @include badge-variant($value);
  }
}