// @mixin label-size($local-size, $local-font-size) {
//   height: $local-size;
//   line-height: $local-size;
//   font-size: #{$local-font-size}em;
// }

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

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

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

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

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

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

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