//
// BUTTON RESET
//
@mixin button-reset {
  display: inline-block;
  word-wrap: break-word;
  text-decoration: none !important; //Needs to override card styles
  cursor: pointer;
  width: auto;
  height: auto;
  text-align: center;
  font-size: $font-size;
  font-family: $font-family;
  line-height: 28px;
  font-variant: normal;
  vertical-align: middle;
  background-image: none;
  border: $light-border-width solid transparent;
  background-color: transparent;
  white-space: nowrap;
  color: $black;
  padding: 0;
  text-transform: none;
  -webkit-appearance: none;
}

//
// BUTTON GENERATORS
//
@mixin cc-button {
  @include button-reset;
  @include border-radius(4px);
  @include transition(all 150ms);
  height: 30px;
  text-transform: uppercase;
}
@mixin cc-button-min-width {
  padding: 0 $gutter*1.5;
  min-width: 100px;
}
@mixin cc-button-color-fade($color, $background-color, $border-color, $background-color-bottom, $background-color-top) {
  color: $color !important; //Remove important after 60635512 is done
  border: $light-border-width solid $border-color;
  background-color: $background-color;
  &:not([disabled]) {
    @include box-shadow(inset $background-color-bottom 0 -13px 10px, inset $background-color-top 0 9px 10px);
    &:hover,
    &:active {
      @include box-shadow(inset darken($background-color-bottom, 7%) 0 -13px 10px, inset darken($background-color-top, 7%) 0 9px 10px);
      background-color: darken($background-color-bottom, 7%);
      background: darken($background-color-bottom, 7%) !important; // Override JqueryUI
      border: $light-border-width solid $border-color !important; // Override JqueryUI
    }
  }
  &[disabled] {
    background-color: mix($light-gray, lighten($background-color, 35%), 25%);
    color: contrast-color(mix($light-gray, lighten($background-color, 35%), 25%), $light-gray, white, 90%);
    border-color: lighten($border-color, 25%);
    cursor: default;
  }
}

@mixin cc-button-flat-primary($color, $background-color, $border-color, $inset1-color: $border-color, $inset2-color: $border-color) {
  @include button-reset;
  @include box-shadow(inset 0 1px $inset1-color, inset 0 -1px $inset2-color);
  @include font-size-px-to-rem($font-size, true);
  @include border-radius(3px);
  text-transform: uppercase;
  background-color: $background-color;
  color: $color;
  border: $light-border-width solid $border-color;
  padding: 9px 19px;
  text-transform: uppercase;
  min-width: 90px;
  &:hover:not([disabled]) {
    background-color: lighten($background-color, 5);
    border-color: lighten($border-color, 5);
  }
  &:active:not([disabled]) {
    background-color: $background-color;
    border-color: $border-color;
  }
  &:disabled {
    opacity: 0.5;
    cursor: default;
  }
}

@mixin cc-button-flat-secondary($color, $background-color, $border-color, $inset1-color: $border-color, $inset2-color: $border-color) {
  @include button-reset;
  @include box-shadow(inset 0 1px $inset1-color, inset 0 -1px $inset2-color);
  @include font-size-px-to-rem(13px, true);
  @include border-radius(3px);
  text-transform: uppercase;
  background-color: $background-color;
  color: $color;
  border: $light-border-width solid $border-color;
  padding: 5px 14px;
  text-transform: capitalize;
  min-width: 70px;
  &:hover:not([disabled]) {
    background-color: lighten($background-color, 5);
  }
  &:active:not([disabled]) {
    background-color: $background-color;
  }
  &:disabled {
    opacity: 0.5;
    cursor: default;
  }
}

@mixin cc-button-wire($color, $background-color, $border-color) {
  @include button-reset;
  @include border-radius(4px);
  @include transition(all 150ms);
  border: 1px solid $border-color;
  background-color: $background-color;
  text-transform: uppercase;
  color: $color;
  padding: 0 15px;
  min-width: 100px;
}