@mixin link-primary {
  color: $gray-dark;
  font-weight: 500;

  &:hover {
    color: $blue;
  }
}

@mixin link-secondary {
  color: $blue;

  &:hover {
    color: $blue-dark;
  }
}

@mixin button-primary {
  background-color: $blue;
  border-color: $blue;
  color: $white;

  &:hover,
  &:focus {
    color: $blue;
    background-color: $white;
    border-color: $blue;
  }

  &:active,
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $white;
    background-color: $blue-darker;
    border-color: $blue-darker;
  }

  &:hover {
    span {
      a {
        color: $blue;
        text-decoration: none;
      }
    }
  }
}

@mixin button-secondary {
  background-color: $white;
  border-color: $blue;
  color: $blue;

  &:hover,
  &:focus {
    color: $white;
    background-color: $blue;
    border-color: $blue;
  }

  &:active,
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $white;
    background-color: $blue-darker;
    border-color: $blue-darker;
  }
}

@mixin button-action {
  background-color: $green;
  border-color: $green;
  color: $white;

  &:hover,
  &:focus {
    color: $green;
    background-color: $white;
    border-color: $green;
  }

  &:active,
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $white;
    background-color: $green-dark;
    border-color: $green-dark;
  }
}

@mixin button-large {
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 1rem;
  line-height: 1.5;
}

@mixin button-small {
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: 500;
}

@mixin button-full {
  width: 100%;
}

@mixin button-min160 {
  min-width: 160px;

  @include media-breakpoint-down(sm) {
    @include button-full;
  }
}

@mixin button-slider {
  font-size: 1.25rem;
  height: 30px;
  line-height: normal;
  padding: 2px 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  z-index: 1;
}

@mixin button-thumbs {
  background: transparent;
  border: 0;
  font-size: 20px;
  height: 24px;
  line-height: 20px;
  padding: 2px 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  z-index: 1;
}

@mixin button-toggle {
  font-size: 12px;
  height: 18px;
  line-height: normal;
  padding: 0;
  width: 18px;
  color: $warm-grey;
  border-radius: 2px;
  border-color: transparent;
}
