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

	color: rgba($bg, .9);
	background-color: rgba($bg, .05);
	padding: 0.35em 0.5em;
	border: 1px solid rgba($bg, .5);	  

  @at-root a#{&} {
    @include hover-focus {
      color: color-yiq($bg);
      background-color: darken($bg, 10%);
    }

    &:focus,
    &.focus {
      outline: 0;
      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
    }
  }
}
