// --------------------------------------------
// Badge Base Mixin ---------------------------
// --------------------------------------------
@mixin badge-base {
  align-items: center;
  color: $color-white;
  display: inline-flex;
  text-decoration: none;
  vertical-align: middle;
  background: $color-black;
  height: $badge-size;
  font-family: $badge-font;
  padding: $badge-padding;
  font-size: $badge-font-size;
  font-weight: $badge-font-weight;
  line-height: $badge-line-height;
  border-radius: $badge-border-radius;

  &:empty {
    padding: $space-0;
    display: inline-block;
    vertical-align: inherit;
    border-radius: $radius-round;
    width:  calc($badge-size / 2);
    height: calc($badge-size / 2);
  }


  &-close {
    @include close($size: 16px, $x-size: 2px);
    @include close-style($style: "bg-dark");

    margin-left: $space-xs;
    margin-right: -$space-xs;
    border-radius: $badge-border-radius;
  }

  i {
    padding-right: $space-sm - 2;
  }
}


// --------------------------------------------
// Badge Size Mixin ---------------------------
// --------------------------------------------
@mixin badge-size(
  $size: $badge-size,
  $font-size: $badge-font-size) {
  height: $size;
  min-width: $size;
  font-size: $font-size;
  line-height: $size + 1;

  i {
    font-size: $font-size;
  }

  &:empty {
    width: calc($size / 2);
    height: calc($size / 2);
    min-width: 0;
  }
}


// --------------------------------------------
// Badge Style Mixin --------------------------
// --------------------------------------------
@mixin badge-style($bg, $color: $color-white) {
  color: $color;
  background-color: $bg;
}