// Badge base
// ------------------------------------------

$_padding: 0.375em;
$_rounded: 0.25rem;

.badge {
  border-radius: $_rounded;
  font-family: $font-family-regular;
  padding: 0 $_padding;
  text-transform: uppercase;
  font-size: 0.89em;
  display: inline-flex;
  align-items: center;
  height: 1.6em;

  .badge {
    margin-left: -$_padding;
    margin-right: $_padding;
    font-size: 1em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    &.badge-right {
      margin-right: -$_padding;
      margin-left: $_padding;
      border-top-right-radius: $_rounded;
      border-bottom-right-radius: $_rounded;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

}

// Colored Badges
// ------------------------------------------

.badge-default {
  background: $gray-200;
  color: $gunmetal;
}

.badge-primary {
  background: $alert-blue;
}

.badge-success {
  background: $alert-green;
}

.badge-info, .badge-sev-info, .badge-sev-low {
  @extend .alert-info;
  background: $blue-500;
  color: $gunmetal;
}

.badge-danger, .badge-sev-critical, .badge-sev-high {
  background: $red-700;
  color: $white;
}

.badge-warning, .badge-sev-medium {
  background: $yellow-700;
  color: $gunmetal;
}


// Tab Badges
.nav-tabs .nav-link:not(.active) .badge {
  &.badge-warning {
    background-color: $brand-warning;
  }

  &.badge-danger {
    background-color: $brand-danger;
  }
}


.tag-remove-link,
.badge .btn-remove {
  color: $gunmetal;
  margin-left: 0.5rem;
  font-size: 80%;
  display: block;
  float: right;
}

.tag-container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
