// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons

@mixin button-variant($color, $background) {

  // Hover and focus styles are shared
  @include hover-focus {
    color: $color;
    border-color: transparent;
    background-color: mix($background, rgb(255, 255, 255), 85);
  }

  @include status-disabled {
    color: $gray-light-25;
    border-color: $gray-light-9;
    background-color: $gray-light-4;
  }
  color: $color;
  background-color: $background;
  border: 1px solid $background;

  &:active,
  &.active {
    border-color: transparent;
    background-color: mix($background, rgb(0, 0, 0), 85);
    &::after {
      border: 0 solid $background;
    }
  }
}

@mixin button-outline-variant($color, $border) {
  @include hover-focus {
    color: mix($color, rgb(255, 255, 255), 85);
    border-color: mix($border, rgb(255, 255, 255), 85);
  }

  @include status-disabled {
    color: $gray-light-25;
    border-color: $gray-light-9;
    background-color: $gray-light-4;
  }
  color: $color;
  background: transparent;
  border-color: $border;

  &:active,
  &.active {
    color: mix($color, rgb(0, 0, 0), 85);
    border-color: mix($border, rgb(0, 0, 0), 85);
    &::after {
      border: 0 solid $color;
    }
  }
}

// Button sizes
@mixin button-size($height, $padding-x, $font-size, $btn-icon-font-size) {
  height: $height;
  padding: 0 $padding-x;
  line-height: $height - 2px;

  > span {
    font-size: $font-size;
  }

  .#{$icon-prefix} {
    font-size: $btn-icon-font-size;
  }
}