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

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

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

  &[href] {
    @include hover-focus {
      color: $color;
      text-decoration: none;
	 		background-color: $bg;
	 		box-shadow: inset 0 0 0 1px $border;
    }
  }
}