@mixin badge-variant($bg, $color: $brand-white) {
  color: $color;
  background-color: $bg;
}


.badge {
  display: inline-block;
  // 2px because $font-size-small = 14px - 2px
  padding: 2px 5px;
  color: $brand-white;
  font-size: $font-size-small;
  font-weight: bold;
  line-height: 1; // reset
  background: $brand-gray;
  border-radius: $border-radius-rounded;

  &.-primary {
    @include label-variant($brand-primary);
  }

  &.-emerald {
    @include label-variant($brand-emerald);
  }

  &.-sky {
    @include label-variant($brand-sky);
  }

   &.-sun {
    @include label-variant($brand-sun);
  }

  &.-crimson {
    @include label-variant($brand-crimson);
  }
}