// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
@mixin button-variant($color, $background, $border, $active-background, $active-border) {
  $selector: #{&};

  color: $color;
  background-color: $background;
  border-color: $border;
  @include hover-focus-active {
    color: $color;
    background-color: $active-background;
    border-color: $active-border;
  }
  @at-root a {
    @include hover-focus-active {
      #{$selector} {
        color: $color;
        background-color: $active-background;
        border-color: $active-border;
      }
    }
  }
  &.disabled,
  &:disabled {
    &:focus,
    &.focus {
      background-color: $background;
      border-color: $border;
    }
    @include hover-focus-active {
      background-color: $background;
      border-color: $border;
    }
  }
}

@mixin button-outline-variant($color) {
  color: $color;
  background-image: none;
  background-color: transparent;
  border-color: $color;
  overflow: hidden;
  position: relative;
  z-index: 1;
  &:after {
    background: $color;
    content: "";
    height: 100%;
    left: -80%;
    opacity: .2;
    position: absolute;
    top: 0;
    transform: rotate(-45deg);
    transition: all .5s;
    width: 100%;
    z-index: -1;
  }
  &:before {
    background: $color;
    bottom: 0;
    content: "";
    left: -50%;
    height: 120%;
    position: absolute;
    top: -5%;
    transform: skewX(-55deg);
    transition: width .5s;
    width: 1px;
    z-index: -1;
  }
  @include hover-focus-active {
    background-color: $color;
    color: #fff;
    transition: border .2s ease-in-out .2s, background-color .2s ease-in-out .3s, color .2s ease-in-out .2s;
    &:after {
      left: 80%;
    }
    &:before {
      transition-delay: .1s;
      width: 200%;
    }
  }
  &.ajax-loading {
    color: #fff;
    background-color: $color;
    border-color: $color;
  }
  &.disabled,
  &:disabled {
    &:focus,
    &.focus {
      background-color: transparent;
      border-color: lighten($color, 20%);
    }
    @include hover-focus-active {
      background-color: transparent;
      border-color: lighten($color, 20%);
    }
  }
}

// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
  padding: $padding-y $padding-x;
  line-height: $line-height;
  font-size: $font-size;
  border-radius: $border-radius;
}