/******************************************************************
Site Name:
Author:

Stylesheet: Button Styles

******************************************************************/


%btn {
  display: inline-block;
  position: relative;
  font-family: $sans-serif;
  border: 0;
  cursor: pointer;
  text-align: center;
  font-size: $base-font-size / $scale-ratio;
  line-height: $base-line-height;
  border-radius: .2rem;
  padding: 0 .6em !important;
  text-transform: uppercase;
  text-decoration: none;
  font-variant: normal;
  font-style: normal;
  font-weight: normal;
  word-wrap: normal;
  letter-spacing: .05rem;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: subpixel;
  @include transition(all 0.14s ease-in-out);

  &.large {
    text-transform: none;
    letter-spacing: 0;
    font-size: $base-font-size; 
    line-height: $base-line-height * 2;
  }

  &.medium {
    text-transform: none;
    letter-spacing: 0;
    font-size: $base-font-size; 
    line-height: $base-line-height * 1.5;
  }

  &.normal {  
    font-size: $base-font-size / $scale-ratio; 
    line-height: $base-line-height;
  }

  // clicking on the button
  &:active {
    top: 1px; // adds a tiny hop to the click
  }

} // end .button


@mixin button-colors(
  $buttonL: 50, 
  $buttonS: 100, 
  $textL: 80, 
  $textS: 100, 
  $grad: $cool
){

    background-color: hueno($L: $buttonL, $S: $buttonS, $grad: $grad) !important;
    color: hueno($L: $textL, $S: $textS, $grad: $grad) !important;

    &:hover, &:focus { 
      background-color: hueno($L: $buttonL + 5, $S: $buttonS, $grad: $grad) !important; 
      color: hueno($L: $textL + 5, $S: $textS, $grad: $grad) !important; 
    }    
    
    &:active{ 
      background-color: hueno($L: $buttonL - 10, $S: $buttonS, $grad: $grad) !important; 
      color: hueno($L: $textL - 10, $S: $textS, $grad: $grad) !important; 
    }
}

%btn-create{
  @include button-colors(
      $buttonL: 80, 
      $textL: 100, 
      $grad: $warm
    );

  &.light{
      @include button-colors(
        $buttonL: 97, 
        $textL: 80, 
        $grad: $warm
      );
  }

}

%btn-read{
  @include button-colors(
      $buttonL: 75, 
      $textL: 95,  
      $grad: $cool
    );

  &.light{
      @include button-colors(
        $buttonL: 97, 
        $textL: 75, 
        $grad: $cool
      );
  }
  
}

%btn-save{
  @include button-colors(
      $buttonL: 75, 
      $textL: 95, 
      $grad: $green
    );

  &.light{
      @include button-colors(
        $buttonL: 97, 
        $textL: 75, 
        $grad: $green
      );
  }
  
}

%btn-delete{
  @include button-colors(
      $buttonL: 50, 
      $textL: 80,
      $textS: 0, 
      $grad: $warm
    );

  &.light{
      @include button-colors(
        $buttonL: 97, 
        $textL: 50, 
        $textS: 0, 
        $grad: $warm
      );
  }
  
}




/* defaults */
button, 
.button, 
input[type="button"], 
input[type=reset], 
input[type=submit]{
  @extend %btn;
}

button, 
.button, 
input[type="button"]{
    @extend %btn-read;
    &.create{ @extend %btn-create;}
    &.delete{ @extend %btn-delete;}
    &.save{ @extend %btn-save;}
}

input[type=reset]{
    @extend %btn-delete;
}

input[type=submit]{
    @extend %btn-save;
}