// Button sizes
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  line-height: $line-height;
  border-radius: $border-radius;
}

// Button variant : you can set color, background color and border-color
@mixin button-variant($color: null, $background: null, $border: null, $hover-color:$color, $hover-background: $background, $hover-border:$border, $disabled-color:$color, $disabled-background: $background, $disabled-border:$border, $active-color:$color, $active-background: $background, $active-border:$border, $box-shadow: true, $letter-spacing: normal, $font-weight: normal) {
  color: $color;
  background-color: $background;
  letter-spacing: $letter-spacing;
  font-weight: $font-weight;
  border: 1px solid $border;
  box-shadow: none;

  @if $box-shadow == 'true' and $background != $color-white and $background != transparent {
    box-shadow: inset 0 -1px 1px 0 rgba(0,0,0,0.1), inset 0px 0px 0px 1px $border;
  }

  &:hover, &.hover{
    color: $hover-color;
    background-color: $hover-background;
    border: 1px solid $hover-border;
    box-shadow: none;
    @if $box-shadow == 'true' and $hover-background != $color-white and $hover-background != transparent {
      box-shadow: inset 0 -1px 1px 0 rgba(0,0,0,0.1), inset 0px 0px 0px 1px $hover-border;
    }
    i {
      color: $hover-color;
    }
  }

  &:active, &.active {
    color: $active-color;
    background-color: $active-background;
    border: 1px solid $hover-border;
    outline: none;
    @if $box-shadow == 'true' and $active-background != $color-white and $active-background != transparent {
      box-shadow: inset 0 -1px 1px 0 rgba(0,0,0,0.1), inset 0px 0px 0px 1px $active-border;
    } @else {
      box-shadow: inset 0px 4px 8px $active-border;
    }

    i {
      color: $active-color;
    }
  }

  &:disabled, &.disabled {
    &:not(.sh-btn-loading):not(.sh-input-inner-button):not(.sh-textarea-inner-button) {
      color: $disabled-color;
      background-color: $disabled-background;
      border-color: $disabled-border;
      opacity: .4;
      box-shadow: none;
      @if $box-shadow == 'true' and $disabled-background != $color-white and $disabled-background != transparent {
        box-shadow: inset 0 -1px 1px 0 rgba(0,0,0,0.1), inset 0px 0px 0px 1px $disabled-border;
      }

      i {
        color: $disabled-color;
      }
    }
  }
}

@mixin button-base() {
  @include transition(color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border 0.2s ease);
  border: none;
  cursor: pointer;
  outline: none;
  display: inline-block;
  text-decoration: none;
  -webkit-appearance: none;
  text-align: center;
  vertical-align: middle;

  &:hover, &.hover, &:active, &.active, &:disabled, &.disabled {
    outline: none;
  }

  &:disabled, &.disabled {
    cursor: not-allowed;
  }
}

@mixin btn-colors($value) {
  @each $name, $params in $value {
    .sh-btn-#{$name} {
      @include button-variant(#{nth($params, 1)}, #{nth($params, 2)}, #{nth($params, 3)}, #{nth($params, 4)}, #{nth($params, 5)}, #{nth($params, 6)}, #{nth($params, 7)}, #{nth($params, 8)}, #{nth($params, 9)}, #{nth($params, 10)}, #{nth($params, 11)}, #{nth($params, 12)}, #{nth($params, 13)}, #{nth($params, 14)}, #{nth($params, 15)});
    }
  }
}
@mixin button-sizes($value) {
  @each $name, $params in $value {
    .sh-btn-#{$name} {
      @include button-size(#{nth($params, 1)}, #{nth($params, 2)}, #{nth($params, 3)}, #{nth($params, 4)}, #{nth($params, 5)});
    }
  }
}