/**
 *  BADGE
 *
 *  Markup:
 *  -------
 *
 *  <ul>
 *    <li class="badge badge--primary">Badge 1</li>
 *    <li class="badge badge--secondary badge--big">Badge 1</li>
 *  </ul>
 *
 */

.badge {
  background-color: $bg-badge;
  border-radius:  $bdr-badge;
  color: $c-badge;
  display: inline-block;
  line-height: $lh-badge;
  padding: $p-badge;

  &--big {
    font-size:  $fz-badge-big;
  }

  &--small {
    font-size:  $fz-badge-small;
  }

  @each $type, $color in $badges-color-map {
    &--#{$type} {
      background-color: $color;
      color: $c-badge-colored;
    }
  }
}