.badge {
  @include unset-link-underline();
  @include border-radius($badge-border-radius); // allow badge border radius to be customized outside of the global border-radius rules
  letter-spacing: $letter-spacing-base;
  text-align: left; // unset Bootstrap default
  text-transform: uppercase;
  vertical-align: baseline;
  white-space: normal; // unset Bootstrap default which can allow text to overflow out of parent containers

  // Use chained selector to successfully override custom border-radius on .badge class
  &.badge-pill {
    @include border-radius($badge-pill-border-radius);
  }
}


//
// Overrides to allow badge colors to be set via variables
//

.badge-primary {
  color: $badge-primary-color;
}

.badge-secondary {
  @include badge-variant($badge-secondary-bg);
  color: $badge-secondary-color;
}

.badge-complementary {
  @include badge-variant($badge-complementary-bg);
  color: $badge-complementary-color;
}

.badge-inverse {
  @include badge-variant($badge-inverse-bg);
  color: $badge-inverse-color;
}

.badge-success {
  color: $badge-success-color;
}

.badge-info {
  color: $badge-info-color;
}

.badge-warning {
  color: $badge-warning-color;
}

.badge-danger {
  color: $badge-danger-color;
}