// Button

// Using a link with usa-button works except for the hover state
a.usa-button:hover {
  color: $color-white;
}

// Replacing some of the secondary buttons that were unceremoniously removed
.usajobs-button-secondary,
.usajobs-button-destructive-action {
  @include makeButton(
    $color-secondary,
    $color-secondary-dark,
    $color-red-darkest
  );
}

.usa-button-big.usajobs-button-secondary {
  border-radius: 8px;
  font-size: $h3-font-size;
  padding: $size-default $size-M;
}

.usajobs-button-secondary-alert {
  background-color: $color-secondary-darkest;

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

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

.usajobs-button-gray {
  background-color: $color-gray;

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

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

// The U.S. Standards disabled button is a little light on the "disabled"
button:disabled,
[type="button"]:disabled,
[type="submit"]:disabled,
.usa-button-disabled {
  opacity: $layer-disabled;
}

// In Application Guide, our button bar background matches the disabled state of a button
// Thus we make the button darker

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

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

  .usa-button,
  .usa-button-primary,
  .usa-button:visited,
  .usa-button-primary:visited,
  button,
  [type="button"],
  [type="submit"],
  [type="reset"],
  [type="image"] {
    &.usa-button-gray {
      background-color: $color-gray;

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

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

.usajobs-button-select {
  @include makePrimaryButton();
  width: 100%;

  @include media($SM) {
    width: 100%;
  }
}

// Toggle is a setup of two buttons to toggle a view or whatever you like
.usajobs-toggle {
  @include clearfix();

  &__button {
    display: block;
    float: left;
    margin: 0;
    height: 4.4rem; // making them the same height as the select menu
    border: 1px solid $color-gray;

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: 0;
    }
  }

  &__button[aria-pressed="true"] {
    @include boxShadow(2, inset);
  }

  &__button[aria-pressed="false"] {
    background-color: $color-white;
    color: $color-gray;

    &:hover {
      background-color: $color-white;
      border-bottom: 1px solid $color-gray;
      color: $color-gray-dark;
    }
  }
}

// This is an odd place to have to put this but, here it is
.usajobs-toggle--search-view {
  float: right;
}

.usajobs-button--link {
  display: inline-block;
  margin: auto;
  padding: 0;
  background-color: $color-white;
  border-radius: 0;
  color: $color-primary;
  font-size: $base-font-size;
  line-height: $base-line-height;
  text-align: inherit;
  font-weight: normal;
  text-decoration: underline;

  &:hover {
    background-color: $color-white;
    color: $color-primary-darker;
    text-decoration: underline;
  }
}

input[type="submit"].usajobs-button--link {
  @include appearance(none);
}