/*------------------------------------*\
  #BUTTONS
\*------------------------------------*/

$btn-border-radius: 4px   !default;

$btn-border-width:  1px   !default;
$btn-border-style:  solid !default;
$btn-border-color:  currentColor !default;
$btn-bg-color:  palette(blue);
// $btn-border-color:  transparent !default;

$btn-padding:         $spacing-unit !default;
$btn-padding--small:  $spacing-unit * 0.5 !default;
$btn-padding--large:  $spacing-unit * 1.5 !default;

$btn-bg-color--flat: palette(blue) !default;


/**
 * 1. Allow us to style box model properties.
 * 2. Line different sized buttons up a little nicer.
 * 3. Make buttons inherit font styles (often necessary when styling `input`s as
 *    buttons).
 * 4. Reset/normalize some styles.
 * 5. Force all button-styled elements to appear clickable.
 * 6. Subtract the border size from the padding value so that buttons do not
 *    grow larger as we add borders.
 */
 @mixin c-button(){
   @include font-weight(medium);
   @include no-select();
   @include button-color($btn-bg-color);
   border-style: $btn-border-style;
   border-width: $btn-border-width;
   display: inline-block; /* [1] */
   vertical-align: middle; /* [2] */
   // font: inherit; /* [3] */
   text-align: center; /* [4] */
   margin: 0; /* [4] */
   cursor: pointer; /* [5] */
   padding: 10px $btn-padding;
   text-transform: uppercase;
   text-decoration: none;
   border-radius: $btn-border-radius;
   transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease;

   &:hover,
   &:focus,
   &:active {
     text-decoration: none;
   }
 }

%c-button,
.c-button {
  @include c-button();
}



%c-button--subtle,
.c-button--subtle {
  background-color: transparent;
  border-color: transparent;
  color: currentColor;

  &:hover {
    background-color: rgba(palette(white),.2);
    color: palette(blue, dark);
    border-color: transparent;
  }

  &:active,
  &:focus {
    background-color: rgba(palette(white),.3);
    color: palette(blue, darker);
    border-color: transparent;
  }
}

%c-button--disabled,
.c-button--disabled,
.c-button[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}


%c-button--full,
.c-button--full {
  width: 100%;
}


%c-button--full\@only-tiny,
.c-button--full\@only-tiny {
    @include respond-to('only-tiny') {
    // @media screen and (max-width: 479px){
      width: 100%;
      display: block;
    }
}


%c-button--flat,
.c-button--flat {
  color: $btn-bg-color--flat;
  background-color: transparent;
  border-color: currentColor;

  &:hover {
    color: currentColor;
    background-color: mix(black, rgba(palette(white), 0.1), 15%);
    border-color: currentColor;
  }

  &:focus,
  &:active {
    color: currentColor;
    background-color: mix(black, rgba(palette(white), 0.1), 30%);
    border-color: currentColor;
  }
}




%c-button--large,
.c-button--large {
  padding: ($btn-padding--large - $btn-border-width) (($btn-padding--large * 2) - $btn-border-width);
}

%c-button--small,
.c-button--small {
  padding: ($btn-padding--small - $btn-border-width) (($btn-padding--small * 2) - $btn-border-width);
}

%c-button--center,
.c-button--center {
  display: block;
  max-width: 300px;
  max-width: calc(100vw - #{$spacing-unit * 4});
  margin-left: auto;
  margin-right: auto;
}


%c-button--raised,
.c-button--raised {
  box-shadow: 0 0 6px palette(gray);
}

%c-button--inverted,
.c-button--inverted {
  @include button-color(palette(white));
}

%c-button--success,
.c-button--success {
  @include button-color(palette(green));
}

%c-button--warning,
.c-button--warning {
  @include button-color(palette(orange));
}

%c-button--error,
.c-button--error {
  @include button-color(palette(red));
}