// Buttons variables

$button-context: “Button”; $button-stroke: inset 0 0 0 units($theme-button-stroke-width);

// Buttons

.usa-button {

@include border-box-sizing;
@include typeset($theme-button-font-family, null, 1);
@include set-text-and-bg("primary", $context: $button-context);
appearance: none;
border: 0;
border-radius: radius($theme-button-border-radius);
cursor: pointer;
display: inline-block;
font-weight: font-weight("bold");
margin-right: units(1);
padding: units(1.5) units(2.5);
text-align: center;
text-decoration: none;
width: 100%;

@include at-media("mobile-lg") {
  width: auto;
}

&:visited {
  color: color("white");
}

&:hover,
&.usa-button--hover {
  @include set-text-and-bg("primary-dark", $context: $button-context);
  border-bottom: 0;
  text-decoration: none;
}

&:active,
&.usa-button--active {
  @include set-text-and-bg("primary-darker", $context: $button-context);
}

&:not([disabled]):focus,
&:not([disabled]).usa-focus {
  outline-offset: units(0.5);
}

&:disabled {
  @include button-disabled;
}

}

.usa-button–accent-cool {

@include set-text-and-bg("accent-cool", $context: $button-context);

&:visited {
  @include set-text-and-bg("accent-cool", $context: $button-context);
}

&:hover,
&.usa-button--hover {
  @include set-text-and-bg("accent-cool-dark", $context: $button-context);
}

&:active,
&.usa-button--active {
  @include set-text-and-bg("accent-cool-darker", $context: $button-context);
}

}

.usa-button–accent-warm {

@include set-text-and-bg("accent-warm", $context: $button-context);

&:visited {
  @include set-text-and-bg("accent-warm", $context: $button-context);
}

&:hover,
&.usa-button--hover {
  @include set-text-and-bg("accent-warm-dark", $context: $button-context);
}

&:active,
&.usa-button--active {
  @include set-text-and-bg("accent-warm-darker", $context: $button-context);
}

}

.usa-button–outline {

background-color: color("transparent");
box-shadow: $button-stroke color("primary");
color: color("primary");

&:visited {
  color: color("primary");
}

&:hover,
&.usa-button--hover {
  background-color: color("transparent");
  box-shadow: $button-stroke color("primary-dark");
  color: color("primary-dark");
}

&:active,
&.usa-button--active {
  background-color: color("transparent");
  box-shadow: $button-stroke color("primary-darker");
  color: color("primary-darker");
}

&.usa-button--inverse {
  $button-inverse-color: "base-lighter";
  $button-inverse-hover-color: "base-lightest";
  $button-inverse-active-color: "white";

  box-shadow: $button-stroke color("base-lighter");
  color: color($button-inverse-color);

  &:visited {
    color: color($button-inverse-color);
  }

  &:hover,
  &.usa-button--hover {
    box-shadow: $button-stroke color($button-inverse-hover-color);
    color: color($button-inverse-hover-color);
  }

  &:active,
  &.usa-button--active {
    background-color: transparent;
    box-shadow: $button-stroke color($button-inverse-active-color);
    color: color($button-inverse-active-color);
  }

  &.usa-button--unstyled {
    @include button-unstyled;
    color: color($button-inverse-color);

    &:visited {
      color: color($button-inverse-color);
    }

    &:hover,
    &.usa-button--hover {
      color: color($button-inverse-hover-color);
    }

    &:active,
    &.usa-button--active {
      color: color($button-inverse-active-color);
    }
  }
}

}

.usa-button–base {

@include set-text-and-bg("base", $context: $button-context);

&:hover,
&.usa-button--hover {
  @include set-text-and-bg("base-dark", $context: $button-context);
}

&:active,
&.usa-button--active {
  @include set-text-and-bg("base-darker", $context: $button-context);
}

}

.usa-button–secondary {

@include set-text-and-bg("secondary", $context: $button-context);

&:hover,
&.usa-button--hover {
  @include set-text-and-bg("secondary-dark", $context: $button-context);
}

&:active,
&.usa-button--active {
  @include set-text-and-bg("secondary-darker", $context: $button-context);
}

}

.usa-button–big {

border-radius: radius($theme-button-border-radius);
font-size: font-size($theme-button-font-family, "lg");
padding: units(2) units(3);

}

.usa-button–disabled {

@include button-disabled;

}

.usa-button–outline-disabled, .usa-button–outline-inverse-disabled, .usa-button–outline:disabled, .usa-button–outline-inverse:disabled, .usa-button–outline-inverse:disabled {

background-color: color("transparent");
pointer-events: none;

&:hover,
&.usa-button--hover,
&:active,
&.usa-button--active,
&:focus,
&.usa-focus {
  background-color: color("transparent");
  border: 0;
}

}

.usa-button–outline-disabled, .usa-button–outline:disabled {

box-shadow: $button-stroke color("disabled");
color: color("disabled");
&.usa-button--inverse {
  background-color: transparent;
  box-shadow: $button-stroke color("base");
  color: color("base");
}

}

.usa-button–unstyled {

@include button-unstyled;

}