/* Table of Contents
==================================================
# Variables
# Label and badge
# Styles
# Colors */

/* # Variables
================================================== */
$onblack-colors: (
  dark-haze: $color-dark-haze,
  haze: $color-haze,
  light-haze: $color-light-haze
);
$ongray-colors: (
  white: $color-white
);
$onwhite-colors: (
  dark-black: $color-dark-black,
  black: $color-black,
  light-black: $color-light-black,
  dark-gray: $color-dark-gray,
  gray: $color-gray,
  light-gray: $color-light-gray,
  lime: $color-lime,
  green: $color-green,
  teal: $color-teal,
  blue: $color-blue,
  indigo: $color-indigo,
  purple: $color-purple,
  pink: $color-pink,
  red: $color-red,
  orange: $color-orange,
  yellow: $color-yellow
);

/* # Label and badge
================================================== */
.badge,
.label {
  background: $color-haze;
  border: 1px solid $color-haze;
  border-radius: 2px;
  box-sizing: border-box;
  color: $color-black;
  display: inline-block;
  padding: 6px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1;
  min-width: 12px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
}
.badge { border-radius: 500px; }
.badge:empty,
.label:empty { display: none; }

/* # Styles
================================================== */
.badge-block,
.label-block {
  display: block;
  width: 100%;
}

/* # Colors
================================================== */
.badge.badge-outline,
.label.label-outline {
  background: $color-transparent;
  color: $color-haze;
}
@each $name, $color in $onblack-colors {
  .badge-#{$name},
  .label-#{$name} {
    background: $color;
    border-color: $color;
  }
  .badge-#{$name}.badge-outline,
  .label-#{$name}.label-outline { color: $color; }
}
@each $name, $color in $ongray-colors {
  .badge-#{$name},
  .label-#{$name}  {
    background: $color;
    border-color: $color;
    color: $color-gray;
  }
  .badge-#{$name}.badge-outline,
  .label-#{$name}.label-outline { color: $color; }
}
@each $name, $color in $onwhite-colors {
  .badge-#{$name},
  .label-#{$name}  {
    background: $color;
    border-color: $color;
    color: $color-white;
  }
  .badge-#{$name}.badge-outline,
  .label-#{$name}.label-outline { color: $color; }
}