/** @component badge */

@mixin badge-base() {
  position: relative;
  display: inline-flex;
  height: rem-calc(20);
  margin-bottom: auto;
  font-family: $badge__font-family;
  font-weight: $badge__font-weight;
  line-height: $badge__font-line-height;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
}

@mixin badge-size($padding: $badge__padding, $text-size: $badge__font-size) {
  @if $padding {
    padding: $padding;
  }

  @if $text-size {
    font-size: $text-size;
  }
}

@mixin badge-style(
  $bg: $badge--blue__background-color,
  $radius: false,
  $color: $badge__font-color
) {
  @if $bg {
    $bg-lightness: lightness($bg);

    background-color: $bg;

    @if $color {
      color: $color;
    }
  }

  @if $radius==true {
    @include radius($badge__radius);
  } @else if $radius {
    @include radius($radius);
  }
}

@mixin badge-outline-style(
  $bc: $badge--blue__background-color,
  $radius: false,
  $bg: transparent
) {
  @if $bc {
    color: $bc;
    border: 1px solid $bc;
  }

  background-color: $bg;
}

@mixin badge(
  $padding: $badge__padding,
  $text-size: $badge__font-size,
  $bg: $badge--blue__background-color,
  $radius: false
) {
  @include badge-base;
  @include badge-size($padding, $text-size);
  @include badge-style($bg, $radius);
}

@mixin badge-variant($color) {
  background-color: $color;

  &[href] {
    &:hover,
    &:focus {
      background-color: darken($color, 10%);
    }
  }
}