@mixin x-badge-variant($bg, $color, $opacity: 0.2) {
  color: $color;
  background-color: rgba($bg, $opacity);

  &[href] {
    @include hover-focus {
      color: $color;
      text-decoration: none;
      background-color: rgba($bg, $opacity);
    }
  }
}

@mixin x-badge-outline-variant($color, $border, $bg) {
	background-color: $bg;
	border: 1px solid $border;
  color: $color;

  &[href] {
    @include hover-focus {
      color: $color;
      text-decoration: none;
	 		background-color: $bg;
	 		border-color: $border;
    }
  }
}

@mixin x-badge-status-variant($color, $bg, $border-type) {
	background-color: $bg;
  color: $color;
  border: 1px $border-type $color;

  &[href] {
    @include hover-focus {
      color: $color;
      text-decoration: none;
	 		background-color: $bg;
	 		border-color: $color;
    }
  }
}