@mixin gl-badge-variant(
  $variant,
  $color,
  $icon-color,
  $bg,
  $hover-color,
  $hover-icon-color,
  $border-color,
  $active-color,
  $active-icon-color,
  $active-bg
) {
  .gl-badge.badge-#{$variant} {
    background-color: $bg;
    color: $color;

    .gl-badge-icon {
      color: $icon-color;
      transition: inherit;
    }
  }

  a.gl-badge.badge-#{$variant} {
    &:hover {
      color: $hover-color;
      // Needed to override bootstrap's badge variant background
      background-color: $bg;
      box-shadow: inset 0 0 0 $gl-border-size-1 $border-color;
      @include gl-text-decoration-none;

      .gl-badge-icon {
        color: $hover-icon-color;
      }
    }

    &:focus {
      color: $hover-color;
      // Needed to override bootstrap's badge variant background
      background-color: $bg;

      .gl-badge-icon {
        color: $hover-icon-color;
      }
    }

    &.active,
    &:active {
      color: $active-color;
      background-color: $active-bg;

      .gl-badge-icon {
        color: $active-icon-color;
      }
    }

    &:active,
    &:focus,
    &:focus:active {
      @include gl-focus;
    }
  }
}

/* Basic badge styles */

.gl-badge {
  @include gl-display-inline-flex;
  @include gl-align-items-center;
  @include gl-font-sm;
  @include gl-font-weight-normal;
  @include gl-line-height-normal;
  @include gl-py-2;
  @include gl-px-3;

  &.sm {
    @include gl-py-0;
  }

  &.md {
    @include gl-py-2;
  }

  &.lg {
    @include gl-py-3;
    @include gl-font-base;
  }

  .gl-badge-icon {
    @include gl-h-5;
    @include gl-w-5;
    @include gl-flex-shrink-0;
    top: auto;
  }
}

/* Variants */

@include gl-badge-variant(
  $variant: muted,
  $color: $gray-600,
  $icon-color: $gray-500,
  $bg: $gray-50,
  $hover-color: $gray-700,
  $hover-icon-color: $gray-600,
  $border-color: $gray-200,
  $active-color: $gray-800,
  $active-icon-color: $gray-700,
  $active-bg: $gray-100
);

@include gl-badge-variant(
  $variant: neutral,
  $color: $gray-700,
  $icon-color: $gray-500,
  $bg: $gray-100,
  $hover-color: $gray-800,
  $hover-icon-color: $gray-600,
  $border-color: $gray-200,
  $active-color: $gray-900,
  $active-icon-color: $gray-700,
  $active-bg: $gray-200
);

@include gl-badge-variant(
  $variant: info,
  $color: $blue-700,
  $icon-color: $blue-500,
  $bg: $blue-100,
  $hover-color: $blue-800,
  $hover-icon-color: $blue-600,
  $border-color: $blue-200,
  $active-color: $blue-900,
  $active-icon-color: $blue-700,
  $active-bg: $blue-200
);

@include gl-badge-variant(
  $variant: success,
  $color: $green-700,
  $icon-color: $green-500,
  $bg: $green-100,
  $hover-color: $green-800,
  $hover-icon-color: $green-600,
  $border-color: $green-200,
  $active-color: $green-900,
  $active-icon-color: $green-700,
  $active-bg: $green-200
);

@include gl-badge-variant(
  $variant: warning,
  $color: $orange-700,
  $icon-color: $orange-500,
  $bg: $orange-100,
  $hover-color: $orange-800,
  $hover-icon-color: $orange-600,
  $border-color: $orange-200,
  $active-color: $orange-900,
  $active-icon-color: $orange-700,
  $active-bg: $orange-200
);

@include gl-badge-variant(
  $variant: danger,
  $color: $red-700,
  $icon-color: $red-500,
  $bg: $red-100,
  $hover-color: $red-800,
  $hover-icon-color: $red-600,
  $border-color: $red-200,
  $active-color: $red-900,
  $active-icon-color: $red-700,
  $active-bg: $red-200
);

@include gl-badge-variant(
  $variant: tier,
  $color: $purple-700,
  $icon-color: $purple-500,
  $bg: $purple-100,
  $hover-color: $purple-800,
  $hover-icon-color: $purple-600,
  $border-color: $purple-200,
  $active-color: $purple-900,
  $active-icon-color: $purple-700,
  $active-bg: $purple-200
);

// overriding Bootstap's `.btn .badge {top: -1px}` as the badge is not vertically centered otherwise
.gl-button .gl-badge {
  top: 0;
}