/* Badges */


//Badge Mixins

//Badge vriations
@mixin badge-variations($color) {
  border: 1px solid $color;
  color: $white;
  background-color: $color;
}

// Badge outlined variations
@mixin badge-outline-variations($color) {
  color: $color;
  border: 1px solid $color;
}

@mixin badge-inverse-variant($color, $color-hover: $white) {
  background-color: rgba($color, 0.2);
  background-image: none;
  border-color: rgba($color, 0);

  &:not(.badge-inverse-light) {
    color: $color;
  }

  &:hover {
    color: $color-hover;
    background-color: $color;
    border-color: $color;
  }

  &.focus,
  &:focus {
    box-shadow: 0 0 0 3px rgba($color, .5);
  }
}

.badge {
  border-radius: 4px;
  font-size: 11px;
  line-height: 1;
  padding: 5px 7px;
  font-family: $type1;

  &.badge-pill {
    border-radius: 10rem;
  }
}


/*Badge variations*/
@each $color,
$value in $theme-colors {
  .badge-#{$color} {
    @include badge-variations($value);
  }
}

/*Badge outlined variations*/
@each $color,
$value in $theme-colors {
  .badge-outline-#{$color} {
    @include badge-outline-variations($value);
  }
}

@each $color,
$value in $theme-colors {
  .badge-inverse-#{$color} {
    @include badge-inverse-variant($value);
  }

  .badge-#{$color}:not(.badge-light) {
    color: $white;

    &:hover,
    &:focus,
    &:active {
      color: $white;
    }

    &:focus,
    &:active {
      background: $value;
      border-color: $value;
    }
  }

  .badge-outline-#{$color} {

    &:hover,
    &:focus,
    &:active {
      background: theme-gradient-color($color);
      color: $white;
    }
  }
}