button-variant()

// Button variant mixin
@mixin button-variant($name, $bg-color, $color: 'light', $lightness: -2%) {
  &.btn-#{$name} {
    @include background($bg-color);
    border-color: color($bg-color, $lightness: $lightness - 1%);
    @include color($color);
    @include color-visited($color);
    &:focus {
      @include control-shadow($bg-color);
    }
    &:focus,
    &:hover {
      @include background($bg-color, $lightness: $lightness);
      border-color: color($bg-color, $lightness: $lightness - 3%);
    }
    @include color-focus($color);
    @include color-hover($color);

    &:active,
    &.active {
      @include background($bg-color, $lightness: $lightness - 5%);
      border-color: color($bg-color, $lightness: $lightness - 8%);
    }
    @include color-active($color);

    &.loading {
      &::after {
        border-bottom-color: color($color);
        border-left-color: color($color);
      }
    }
  }
}