TrestleAdmin/trestle

@mixin badge-variant(
  $background,
  $color: color-contrast($background),
  $hover-background: shift-color($background, $badge-hover-scale)
) {
  --#{$prefix}badge-bg: #{$background};
  --#{$prefix}badge-color: #{$color};
  --#{$prefix}badge-hover-bg: #{$hover-background};
}

.badge {
  background: var(--#{$prefix}badge-bg);

  @at-root a#{&} {
    &:hover,
    &:focus {
      color: var(--#{$prefix}badge-color);
      background-color: var(--#{$prefix}badge-hover-bg);
    }
  }
}

.badge-pill {
  border-radius: $border-radius-pill;
}

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