// --------------------------------------------
// Button Base Mixin --------------------------
// --------------------------------------------
@mixin btn-base {
  outline: 0;
  border: $btn-bd;
  cursor: pointer;
  text-align: center;
  position: relative;
  white-space: nowrap;
  color: $btn-default-c;
  text-decoration: none;
  display: inline-block;
  vertical-align: baseline;
  border-radius: $btn-radius;
  font-weight: $btn-font-weight;
  font-family: $btn-font;
  transition: background-color 0.1s ease-in;

  @if $btn-shadow {
    box-shadow: $btn-shadow;
  }
}


// --------------------------------------------
// Button Outline Mixin -----------------------
// --------------------------------------------
@mixin btn-outline(
  $border-color,
  $color: $border-color,
  $border-color-hover:
  $border-color,
  $bg: transparent,
  $bg-hover: $border-color,
  $color-hover: $color-white) {
  color: $color;
  box-shadow: none;
  background-color: $bg;
  border: 1px solid $border-color;

  &.c-btn-outline-active {
    @include btn-active($bg, $border-color);
  }

  &:not(:disabled) {
    &:hover {
      color: $color-hover;
      background-color: $bg-hover;
      border-color: $border-color-hover;
    }

    &:active,
    &.c-btn-active {
      @include btn-active($bg-hover, $border-color);

      color: $color-hover;
    }
  }
}


// --------------------------------------------
// Button Focus Mixin -----------------------
// --------------------------------------------
@mixin btn-focus(
  $shadow: $btn-shadow-focus) {
  box-shadow: $shadow;
}


// --------------------------------------------
// Button Active Mixin -----------------------
// --------------------------------------------
@mixin btn-active(
  $bg: $color-gray-1,
  $border: $color-gray-4) {
  background: $bg;
  background-image: none;
  box-shadow: $btn-active-shadow;
}

@mixin btn-active-selected () {
  &-active {
    &.c-btn,
    &:hover,
    &:active,
    &:focus {
      color: $color-white;
      border-color: transparent;
      background: $btn-active-selected;
    }
  }
}


// --------------------------------------------
// Button Disabled Mixin ----------------------
// --------------------------------------------
@mixin btn-disabled(
  $bg: $btn-disabled-bg,
  $bd: 1px solid $bg,
  $color: $btn-disabled-c,
  $shadow:none ) {
  &,
  &:hover,
  &:focus,
  &:active {
    color: $color;
    line-height: 1;
    background: $bg;
    appearance: none;
    box-shadow: none;
    cursor: not-allowed;
    border: $bd;
  }
}


// --------------------------------------------
// Button Style Mixins ------------------------
// --------------------------------------------
@mixin btn-style(
  $bg, $bg-hover,
  $bg-active,
  $border,
  $color: $color-white) {

  @if $enable-btn-gradients == true {
    background: linear-gradient(lighten($bg, 6%), $bg 66%, darken($bg, 4%));
    transition: none;
  } @else {
    background: $bg;
  }

  @if $btn-shadow {
    box-shadow: $btn-shadow;
  }

  @if $enable-btn-border == false {
    border-color: transparent;
    background-size: 100% calc(100% + 2px);
    background-position-y: -1px;
  } @else {
    border-color: $border;
  }

  color: $color;

  &:focus,
  &.c-btn-focus {
    box-shadow: 0 0 0 0.15rem rgba($bg, .5);
  }

  @if $enable-btn-white-label == true {
    &:hover {
      background-color: lighten($bg, 5%);
      background-image: radial-gradient(farthest-corner, rgba(255, 255, 255, .15), rgba(255, 255, 255, .1));
    }
  } @else {
    &:hover {
      background-color: $bg-hover;
      background-image: none;
    }
  }

  &:active,
  &.c-btn-active {
    @include btn-active($bg-active);

    @if $enable-btn-border == false {
      border-color: transparent;
    } @else {
      border-color: $border;
    }
  }
}

@mixin button-colors($map...) {
  @each $type in $map {
    // Defaults
    $bg: '';
    $bg-hover: '';
    $border: '';
    $bg-active: '';
    $color: $color-white;

    @if map-has-key($type, bg) {
      $bg: map-get($type, bg);
    }

    @if map-has-key($type, bg-hover) {
      $bg-hover: map-get($type, bg-hover);
    } @else if map-has-key($type, bg) {
      $bg-hover: lighten($bg, 7);
    }

    @if map-has-key($type, bg-active) {
      $bg-active: map-get($type, bg-active);
    } @else if map-has-key($type, bg) {
      $bg-active: desaturate($bg, 15%);
    }

    @if map-has-key($type, border) {
      $border: map-get($type, border);
    } @else if map-has-key($type, border) {
      $border: transparent;
    }

    @if map-has-key($type, color) {
      $color: map-get($type, color);
    }

    @include btn-style($bg, $bg-hover, $bg-active, $border, $color);
  }
}


// --------------------------------------------
// Button Size Mixin --------------------------
// --------------------------------------------
@mixin btn-size($font-size, $padding, $height) {
  height: $height;
  padding: $padding;
  font-size: $font-size;
  line-height: $height - 2;
}

@mixin button-sizing($map...) {
  @each $size in $map {
    // Defaults
    $font-size: '';
    $padding: '';
    $height: '';

    @if map-has-key($size, font-size) {
      $font-size: map-get($size, font-size);
    }

    @if map-has-key($size, padding) {
      $padding: map-get($size, padding);
    }

    @if map-has-key($size, height) {
      $height: map-get($size, height);
    }

    @include btn-size($font-size, $padding, $height);
  }
}