/* Modules - Buttons
------------------------------------------------------- */

// base button

button,
.button {
  display: inline-block; 
  color: $button-color; 
  
  // background: $button-background-color;
  // use the gradient background instead of a solid color
  @extend .afp-gradient;

  // now set up a bg gradient hover trick
  background-size: auto 150%;
  background-position: 0 100%;

  // and set up a transition
  @include trans-bp($transition-time);

  text-decoration: none; 
  text-transform: $button-text-transform; 
  text-align: center; 
  font-family: $sans; 
  font-weight: $button-font-weight-default; 
  font-weight: $button-font-weight; 
  font-size: $button-font-size; 
  letter-spacing: $button-letter-spacing;
  line-height: 1em; 
  cursor: pointer; 
  padding: $button-padding;
  margin: $button-margin;
  -webkit-font-smoothing: antialiased;
  border: 3px solid $brand-color-2;

  &:visited {
    color: $button-color-visited;
    //background: $button-background-color-visited;
    //@extend .afp-gradient;
  }
  &:hover,
  &:focus {
    color: $button-color-hover;
    //background: $button-background-color-hover;
    //@extend .afp-gradient-on;
    background-position: 0 0;
  }
  &:active {
    color: $button-color-active;
    //background: $button-background-color-active;
    //@extend .afp-gradient-on;
    background-position: 0 0;
  }

}

//@nprfreshair @EconomicPolicy
/*
*/

// big button

.button--big {
  @extend .button; 
  padding: $button-big-padding;
  font-size: $button-big-font-size;
}

// alternate color buttons

.button--altone {
  @extend .button; 
  background: $button-color-alt-one;
  border: none !important;
}
.button--alttwo {
  @extend .button; 
  background: $button-color-alt-two;
  border: none !important;
}
// etc

// BIG alternate color buttons

.button--big--altone {
  @extend .button--big; 
  background: $button-color-alt-one;
  border: none !important;
}
.button--big--alttwo {
  @extend .button--big; 
  background: $button-color-alt-two;
  border: none !important;
}
//etc

/*
// Disabled button

.button--disabled {
  cursor: default;
  pointer-events: none;
  border-bottom: 3px solid #999999;
  background: #cccccc;
}

// Important button

.button--important {
  border-bottom: 3px solid darken($important, 10%);
  background: $important;

  &:hover {
    background: darken($important, 5%);
  }
  &:active {
    border-bottom: 3px solid darken($important, 20%);
    background: darken($important, 10%);
  }

}

// Success button

.button--success {
  border-bottom: 3px solid darken($success, 10%);
  background: $success;

  &:hover {
    background: darken($success, 5%);
  }
  
  &:active {
    border-bottom: 3px solid darken($success, 20%);
    background: darken($success, 10%);
  }

}
*/