.badge {
  text-transform: uppercase;
  padding: .25rem .5rem;
}

.badge-icon {
  padding: 0.4em 0.55em;
  i {
    font-size: 0.8em;
  }
}

.badge-default {
  @include badge-variant($default-color);
}

.badge-primary {
  @include badge-variant($primary-color);
}

.badge-info {
  @include badge-variant($info-color);
}

.badge-success {
  @include badge-variant($success-color);
}

.badge-warning {
  @include badge-variant($warning-color);
}

.badge-danger {
  @include badge-variant($danger-color);
}

.badge-neutral {
  @include badge-variant($white-color);
}

@each $gray-color-name in map-keys($grays) {
  .badge-gray-#{$gray-color-name} {
    @include badge-variant(map-get($grays, $gray-color-name));
  }
}