// 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 {
  border-radius: 8px;
  font-size: 2.4rem;
  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;

}