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

@mixin button-variant($color, $background,$background-gradient) {
  color: $color;
  @include bg-gradient($background,$background-gradient);
  border-width:0;

  // Hover and focus styles are shared
  @include hover {
    color: $color;//prevent <a> hover
    @include hover-gradient($background,$background-gradient);
  }

  @include focus-active{
    @include box-shadow($btn-active-box-shadow);
  }


  &.active{
    &:after {
      border: 0 solid $background;
    }
  }

  @include status-disabled{
    border-color: $gray-lightest;
    background-color: $gray-lightest-10;
    color: $gray-light
  }

}

@mixin button-outline-variant($color, $color-hover, $border-color, $border-hover-color) {
  color: $color;
  border-color: $border-color;
  background: transparent;
  @include hover {
    color: $color-hover;
    border-color: $border-hover-color;
  }

  @include focus-active{
    color: $color-hover;
    border-color: $border-hover-color;
    @include box-shadow(inset 0 0 0 2px rgba($color-hover, .3));
  }

  &.active{
    &:after {
      border: 0 solid $border-hover-color;
    }
  }
  @include status-disabled{
    border-color: $gray-lightest;
    background-color: $gray-lightest-10;
    color: $gray-light;
    box-shadow: none;
  }
}

// Button sizes
@mixin button-size($height, $padding-x, $font-size,$btn-icon-font-size) {
  padding: 0 $padding-x;
  height:$height;
  line-height: $height;
  >span{
    font-size: $font-size;
  }
  .aid{
    font-size:$btn-icon-font-size;
  }
}