// Buttons variables

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

// Buttons

.usa-button,
.usa-button-primary,
.usa-button:visited,
.usa-button-primary:visited,
button,
[type="button"],
[type="submit"],
[type="reset"],
[type="image"],
a.usa-button {
  appearance: none;
  text-decoration: none;
  background-color: $color-primary-darker;
  border: 0;
  border-radius: .2em;
  color: $color-white;
  cursor: pointer;
  display: inline-block;
  font-family: $font-sans;
  font-size: $base-font-size;
  font-weight: $font-bold;
  line-height: 1;
  margin: {
    top: .5em;
    bottom: .5em;
    right: .5em;
  }
  outline: none;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
  width: 100%;
  -webkit-font-smoothing: antialiased;

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

  &:focus,
  &.usa-button-focus {
    box-shadow: $focus-shadow;
  }

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

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

  &.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-secondary;

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

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

  &.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-outline {
    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;
    }

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

  &.usa-button-outline-inverse {
    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;
    }

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

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

[type="submit"]:disabled,
.usa-button-disabled {
  background-color: $color-gray-lighter;
  color: $color-gray-dark;
  cursor: default;

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

.usa-button-unstyled {
  background: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  padding: 0;
  text-align: left;

  &:focus,
  &:hover {
    box-shadow: initial;
  }
}