// Table of Contents
// ==================================================
// Label & Badge
// Colors
// Styles

// Label & Badge
// ==================================================
.badge,
.label {
  background: color(haze);
  border: 1px solid color(haze);
  border-radius: border-radius(b);
  color: color(steel);
  display: inline-block;
  font-size: text-size(s);
  font-weight: text-weight(semibold);
  line-height: 1;
  overflow: hidden;
  padding: 5.5px 10px 6.5px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;

  &:empty { display: none; }

  > img,
  > svg {
    margin-right: 2px;
    max-height: text-size(xs);
    width: text-size(xs);
  }
}
.badge {
  border-radius: border-radius(xxl);
  min-width: 14px;
  padding: 5px 6px 7px;
}

// Colors
// ==================================================
@each $name, $color in map-keys($colors) {
  .badge-color-#{$name},
  .label-color-#{$name} {
    background: color($name);
    border-color: color($name);
    color: text-color-on($name);

    &.badge-outline,
    &.label-outline { color: color($name); }
    &.badge-color-tint,
    &.label-color-tint {
      background: color-50($name);
      border-color: color-50($name);
      color: color($name);

      &.badge-outline,
      &.label-outline { border-color: color($name); }
    }
  }
  .badge-banner-color-#{$name},
  .label-banner-color-#{$name} { border-left-color: color($name); }
}

// Sizes
// ==================================================
.badge-size-l,
.label-size-l,
.badge-size-m,
.label-size-m {
  font-size: text-size(b);

  > img,
  > svg {
    max-height: text-size(s);
    width: text-size(s);
  }
}
.badge-size-l,
.badge-size-m { min-width: 16px; }
.badge-size-l { padding: 14px 15px 16px; }
.badge-size-m { padding: 9px 10px 11px; }
.label-size-l { padding: 14px 20px 16px; }
.label-size-m { padding: 9px 15px 11px; }
.badge-size-s,
.label-size-s {
  font-size: text-size(xs);
  padding: 3.5px 8px 4.5px;

  > img,
  > svg {
    max-height: text-size(xxs);
    width: text-size(xxs);
  }
}
.badge-size-s {
  min-width: 0;
  padding: 4px 6px 4px 7px;
}

// Styles
// ==================================================
.badge-block,
.label-block {
  display: block;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}
.badge-outline,
.label-outline { background: color(transparent); }
.badge-banner,
.label-banner { border-left-width: 3px; }