@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; 
	border: 1px solid $border;
  color: $color;  

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