$badge-font-size: 14px !default;
$badge-sm-font-size: 12px !default;
$badge-font-weight: 500 !default;

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0 $spacing-xs;
  border-radius: $border-radius;
  font-size: $badge-font-size;
  font-weight: $badge-font-weight;
  background: $light-gray-2;
  color: $primary;

  &.badge--sm {
    font-size: $badge-sm-font-size;
    border-radius: $border-radius-sm;
  }

  &.badge--info {
    background: lighten($primary, 70%);
    color: darken($primary, 10%);
  }

  &.badge--attention {
    background: lighten($warning, 20%);
    color: darken($warning, 55%);
  }

  &.badge--alert {
    background: lighten($danger, 35%);
    color: darken($danger, 30%);
  }

  &.badge--success {
    background: lighten($success, 40%);
    color: darken($success, 30%);
  }

  &.badge--disabled {
    background: $light-gray-2;
    color: $dark-gray-3;
  }
}