// =============
// EDGE BUTTON
// =============

$button-full-style: true !default;
$button-color: $main-color !default;
$button-padding: 10px 20px !default;

// ------------------------------
// BUTTON Hover State
// - Button styling for :hover
// ------------------------------
@mixin h-button-hover($color, $full: $button-full-style) {

  &:hover {
    // Darken background if background is light
    @if contrast-color($color, is_light, is_dark, 70%) == is_light {
      background-color: darken($color, 7.5%);
    }
    // Lighten background if background is dark
    @else {
      background-color: lighten($color, 7.5%);
    }
  }
}

// ------------------------------
// BUTTON Active State
// - Button styling for :active
// ------------------------------
@mixin h-button-active(
  $color,
  $full     : $button-full-style,
  $for-base : false) {

  &:active {
    // Make it darker than hover state if background is light
    @if contrast-color($color, is_light, is_dark, 70%) == is_light {
      background-color: darken($color, 15%);
    }
    // Darken background if background is dark
    @else {
      background-color: darken($color, 7.5%);
    }

    @if $full and $for-base {
      @include box-shadow(inset 1px 1px rgba(black, .1) );
    }
  }
}

// ------------------------------
// BUTTON Focus State
//   Button styling for :focus
// ------------------------------
@mixin h-button-focus($for-base: false) {
  
  @if $for-base {
    &:focus {
      outline: none;
    }
  }
}

// -----------------
// BUTTON
//   Create button
// -----------------
@mixin button(
  $color    : $button-color,
  $padding  : $button-padding,
  $full     : $button-full-style,
  $for-base : false) {
  
  @if $for-base {
    display: inline-block;
    cursor: pointer;
    position: relative;
    border: 1px solid rgba(black, .3);
  }
  
  background-color: $color;
  padding: $padding;
  color: contrast-color($color, $body-font-color, white, 70%);
  
  @if $full and $for-base {
    @include background-image(linear-gradient(top, rgba(white, .1), transparent ) );
    @include transition($g-transition);
    @include box-shadow(inset 1px 1px rgba(white, .1) );
  }

  @include h-button-hover($color:$color);
  @include h-button-active($color:$color, $for-base:$for-base);
  @include h-button-focus($for-base:$for-base);
}

@if $include-button and not $external-call {
  
/* ---------------
EDGE Button
--------------- */
button,
.button {
  @include button($for-base:true);
}

} // $include-button