
.badge {
  border-radius: 3px;
  font-weight: 400;
  line-height: 1.3;
  font-size: 85%;

  &:empty {
    display: inline-block;
    vertical-align: inherit;
  }
}

.badge-pill {
  border-radius: 10rem;
  padding: 6px 16px 7px;
}



// Colors
//
@each $name, $color in $colors {
  .badge-#{$name} {
    background-color: $color;

    &[href]:focus,
    &[href]:hover {
      background-color: darken($color, 5%);
    }
  }
}

.badge-default   {
  color: $color-text-light;
  background-color: $color-bg-light;

  &[href]:focus,
  &[href]:hover {
    color: $color-text-light;
    background-color: darken($color-bg-light, 3%);
  }
}

.badge-secondary {
  color: $color-text-light;
  background-color: $color-secondary;

  &[href]:focus,
  &[href]:hover {
    color: $color-text-light;
    background-color: darken($color-secondary, 3%);
  }
}




// Sizes
//
.badge-sm {
  line-height: 1.2;
  padding-top: 1px;
  padding-bottom: 2px;
  font-size: 75%;
}

.badge-lg {
  line-height: 1.5;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 95%;
}

.badge-xl {
  line-height: 1.7;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 100%;
}