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

@mixin button-variant($color) {
  $background: $color;
  $border: $color;
  $hover-background: mix($white, $background, 12.5%);
  $hover-border: mix($white, $border, 12.5%);
  $active-background: mix($black, $background, 10%);
  $active-border: mix($black, $border, 12.5%);

  color: $white;
  border-color: $border;
  background-color: $background;
  // @include gradient-bg($background);

  &:focus,
  &:hover {
    color: color-yiq($hover-background);
    background-color: $hover-background;
    // @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  &:active {
    background-color: $active-background;
    // @include gradient-bg($active-background);
    border-color: $active-border;
  }

  &.disabled,
  &:disabled {
    color: color-yiq($background);
    background-color: $background;
    border-color: $border;
  }
}

@mixin button-outline-variant($color) {
  $background: $color;
  $border: $color;
  $color-hover: color-yiq($color);
  $hover-background: $color;
  $hover-border: $color;
  $active-background: mix($black, $background, 10%);
  $active-border: mix($black, $border, 12.5%);

  color: $color;
  background-color: transparent;
  background-image: none;
  border-color: $border;

  &:focus,
  &:hover {
    background-color: $hover-background;
    // @include gradient-bg($hover-background);
    color: $color-hover;
    border-color: $hover-border;
  }

  &:active {
    @include gradient-bg($active-background);
    border-color: $active-border;
  }

  &.disabled,
  &:disabled {
    color: $color;
    background-color: transparent;
  }
}