/*
* Badge Module
*
* Badges that indicate the current status of a page/lib/api
*
* Usage: <span class="badge is-experimantal">Experimental</span>
*/

/*
* Badge Types
*/

$badges: (
  beta: (
    border: $amber-700,
    color: $amber-900
  ),
  deprecated: (
    border: $pink-600,
    color: $pink-600
  ),
  experimental: (
    border: $purple-600,
    color: $purple-600
  ),
  stable: (
    border: $green-600,
    color: $green-600
  ),
);


/*
* Class Definition
*/

.badge {
  background: $white;
  border: 2px solid $blue-grey-500;
  border-radius: 2px;
  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
  box-sizing: border-box;
  color: $blue-grey-500;
  display: inline-block;
  font-size: 11px;
  height: $unit * 3;
  line-height: ($unit * 3) - 2;
  margin: ($unit + 4) $unit ($unit + 4) 0;
  padding: 0 $unit;
  text-align: center;
  text-transform: uppercase;

  // BADGE TYPES
  @each $name, $badge in $badges {
    &.is-#{$name} {
      border-color: map-get($badge, border);
      color: map-get($badge, color);
    }
  }
}