@mixin badge-variant($border-color, $background-color, $text-color)
{
  border-color: $border-color;
  background: $background-color;
  color: $text-color;
}

.badge
{
  border-radius: 0;
  border-width: 1px;
  border-style: solid;
  padding: 2px 10px;
  font-weight: $font-weight-semi-bold;
  font-size: $font-size-md;
  line-height: 1;

  &-primary
  {
    @extend .badge;
    @include badge-variant(transparent, $mist, $font-color-secondary);
  }

  &-secondary
  {
    @extend .badge;
    @include badge-variant(transparent, $blueberry, $coconut);
  }

  &-success
  {
    @extend .badge;
    @include badge-variant($feedback-color-success, rgba($feedback-color-success, 0.2), $font-color-primary);
  }

  &-alert
  {
    @extend .badge;
    @include badge-variant($feedback-color-alert, rgba($feedback-color-alert, 0.2), $font-color-primary);
  }
}