// Buttons variables

$button-stroke: inset 0 0 0 2px;

// Buttons

// This mixin is only needed until we fully remove the
// deprecated usa-button-disabled style.
@mixin disabledesque {
  background-color: $color-gray-lighter;
  pointer-events: none;

  &:hover,
  &.usa-button-hover,
  &:active,
  &.usa-button-active,
  &:focus,
  &.usa-focus {
    background-color: $color-gray-lighter;
    border: 0;
    box-shadow: none;
  }
}

/* stylelint-disable selector-no-qualifying-type */
.usa-button,
.usa-button-primary,
.usa-button:visited,
.usa-button-primary:visited,
button,
[type=button],
[type=submit],
[type=reset],
[type=image] {
  @include font-smoothing;
  @include margin(0.5em 0.5em 0.5em null);
  appearance: none;
  background-color: $color-primary;
  border: 0;
  border-radius: $button-border-radius;
  color: $color-white;
  cursor: pointer;
  display: inline-block;
  font-family: $font-sans;
  font-size: $base-font-size;
  font-weight: $font-bold;
  line-height: 1;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
  width: 100%;

  @include media($small-screen) {
    width: auto;
  }

  &:hover,
  &.usa-button-hover {
    background-color: $color-primary-darker;
    border-bottom: 0;
    color: $color-white;
    text-decoration: none;
  }

  &:active,
  &.usa-button-active {
    background-color: $color-primary-darkest;
  }

  &.usa-button-primary-alt {
    background-color: $color-primary-alt;
    color: $color-base;

    &:hover,
    &.usa-button-hover {
      background-color: $color-primary-alt-dark;
    }

    &:active,
    &.usa-button-active {
      background-color: $color-primary-alt-darkest;
      color: $color-white;
    }
  }

  &.usa-button-secondary {
    background-color: $color-white;
    box-shadow: $button-stroke $color-primary;
    color: $color-primary;

    &:hover,
    &.usa-button-hover {
      box-shadow: $button-stroke $color-primary-darker;
      color: $color-primary-darker;
    }

    &:active,
    &.usa-button-active {
      box-shadow: $button-stroke $color-primary-darkest;
      color: $color-primary-darkest;
    }
  }

  &.usa-button-secondary-inverse,
  &.usa-button-outline-inverse {    // Outline inverse to be deprecated in 2.0
    background: transparent;
    box-shadow: $button-stroke $color-white;
    color: $color-white;

    &:hover,
    &.usa-button-hover {
      box-shadow: $button-stroke $color-gray-lighter;
      color: $color-gray-lighter;
    }

    &:active,
    &.usa-button-active {
      box-shadow: $button-stroke $color-gray-light;
      color: $color-gray-lighter;
    }
  }

  &.usa-button-gray {
    background-color: $color-gray;

    &:hover,
    &.usa-button-hover {
      background-color: $color-gray-dark;
    }

    &:active,
    &.usa-button-active {
      background-color: $color-base;
    }
  }

  &.usa-button-red {
    background-color: $color-secondary;

    &:hover,
    &.usa-button-hover {
      background-color: $color-secondary-dark;
    }

    &:active,
    &.usa-button-active {
      background-color: $color-secondary-darkest;
    }
  }

  &.usa-button-big {
    font-size: 1.9rem;
    padding: 1.5rem 3rem;
  }

  &:disabled {
    @include disabledesque;
  }
}
/* stylelint-disable */

.usa-button-disabled  // Deprecated
{
  @include disabledesque
}

.usa-button-secondary-disabled,          // Deprecated
.usa-button-secondary-inverse-disabled,  // Deprecated
.usa-button-secondary:disabled,
.usa-button-secondary-inverse:disabled,
.usa-button-outline-inverse:disabled {   // Outline inverse to be deprecated in 2.0
  box-shadow: $button-stroke $color-gray-lighter;
  pointer-events: none;
  color: $color-gray-lighter;

  &:hover,
  &.usa-button-hover,
  &:active,
  &.usa-button-active,
  &:focus,
  &.usa-focus {
    background-color: $color-white;
    border: 0;
  }
}

html .usa-button-secondary-disabled,          // Deprecated
.usa-button-secondary:disabled {
  background-color: $color-white;
}

html .usa-button-secondary-inverse-disabled,  // Deprecated
.usa-button-secondary-inverse:disabled {
  background-color: transparent;
  color: $color-gray;
  box-shadow: $button-stroke $color-gray;
}

@mixin button-unstyled {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font-weight: $font-normal;
  margin: 0;
  padding: 0;
  text-align: left;
  -webkit-font-smoothing: auto;

  &:hover {
    background-color: transparent;
  }
}

.usa-button-unstyled {
  @include button-unstyled;
}