//
// Buttons Mixins
// --------------------------------------------------

@mixin button-default() {
  border-width: 1px;
  border-style: solid;

  @include themes(color, btn-default-color);
  @include themes(background-color, btn-default-bg);
  @include themes(border-color, btn-default-border);

  &:hover,
  &:focus,
  &.focus {
    @include themes(color, btn-default-color-hover);
    @include themes(background-color, btn-default-bg-hover);
    @include themes(border-color, btn-default-border);
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-image: none;

    @include themes(color, btn-default-color-hover);
    @include themes(background-color, btn-default-bg-active);
    @include themes(border-color, btn-default-border-active);

    &:hover,
    &:focus,
    &.focus {
      @include themes(color, btn-default-color-hover);
      @include themes(background-color, btn-default-bg-active-hover);
      @include themes(border-color, btn-default-bg-active-hover);
    }
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus {
      @include themes(color, btn-default-color-disabled);
      @include themes(background-color, btn-default-bg);
      @include themes(border-color, btn-default-border);
    }
  }

  .badge {
    @include themes(color, color-text-dark);
    @include themes(background-color, color-text-light);
  }
}

@mixin button-default-no-borders() {
  @include themes(color, btn-default-color);
  @include themes(background-color, btn-default-bg);

  @include box-shadow-themes(box-shadow-new);

  &:hover,
  &:focus,
  &.focus {
    @include themes(color, btn-default-color-hover);
    @include themes(background-color, btn-default-no-borders-bg-hover);
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-image: none;

    @include themes(color, btn-default-color-hover);
    @include themes(background-color, btn-default-no-borders-bg-active);

    &:hover,
    &:focus,
    &.focus {
      @include themes(color, btn-default-color-hover);
      @include themes(background-color, btn-default-no-borders-bg-active-hover);
    }
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus {
      @include themes(color, btn-default-color-disabled);
      @include themes(background-color, btn-default-bg);
    }
  }
}

@mixin button-variant($color, $color-dark) {
  color: $color-white;
  background: $color;
  border-width: 0;
  position: relative;
  padding-top: $btn-padding-y;
  padding-bottom: $btn-padding-y;

  @include box-shadow(0 -2px $color-dark inset);

  &:hover,
  &:focus,
  &.focus {
    background: $color-dark;
    color: $color-white;

    @include box-shadow(none);
  }

  &.dropdown-toggle:not(.dropdown-toggle-no-arrow):after {
    @include themes-value(color, $color-white);
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-color: darken($color, 10%);
    background-image: none;
    color: $color-white;

    @include box-shadow(0 -2px darken($color, 15%) inset);

    &:hover,
    &:focus,
    &.focus {
      background-color: darken($color, 20%);

      @include box-shadow(none);
    }
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus {
      background-color: lighten($color, 20%);

      &.dropdown-toggle:not(.dropdown-toggle-no-arrow):after {
        @include themes-value(color, rgba($color-white, 0.8));
      }
    }
  }

  .badge {
    @include themes(color, btn-primary-bg);
    @include themes-value(background-color, $color-white);
  }

  &.btn-lg {
    padding-top: $btn-lg-padding-y;
    padding-bottom: $btn-lg-padding-y;
  }

  &.btn-sm {
    padding-top: $btn-sm-padding-y;
    padding-bottom: $btn-sm-padding-y;
  }
}

@mixin button-link-default() {
  background-color: transparent;
  border-width: 0;

  @include themes(color, btn-link-color);

  &:hover,
  &:focus,
  &.focus {
    @include themes(color, btn-link-color);
    @include themes(background-color, btn-link-hover-bg);
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-image: none;

    @include themes(color, btn-link-active-color);
    @include themes(background-color, btn-link-active-bg);

    &:hover,
    &:focus,
    &.focus {
      @include themes(color, btn-link-active-color);
      @include themes(background-color, btn-link-active-hover-bg);
    }
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus {
      @include themes(color, btn-link-disabled-color);
      @include themes(background-color, btn-link-disabled-bg);
    }
  }

  .badge {
    @each $theme, $map in $themes {
      .#{$theme} & {
        $color: map-get($map, color-text-light);
        $bg: map-get($map, color-text-dark);

        color: $color;
        background-color: $bg;
      }
    }
  }
}

@mixin button-link-variant($color) {
  color: $color;
  background-color: transparent;
  border-width: 0;
  height: auto;

  @include box-shadow(none);

  &:hover,
  &:focus,
  &.focus {
    color: $color;
    background-color: rgba($color, 0.04);
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: darken($color, 5%);
    background-color: rgba($color, 0.08);
    background-image: none;

    @include box-shadow(none);

    &:hover,
    &:focus,
    &.focus {
      color: darken($color, 10%);
      background-color: rgba($color, 0.1);
    }
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus {
      color: rgba($color, 0.8);
      background-color: rgba($color, 0.02);
    }
  }

  .badge {
    @each $theme, $map in $themes {
      .#{$theme} & {
        color: $color;
        background-color: $color;
      }
    }
  }
}

// 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;
  height: $padding-vertical * 2 + $line-height + 2;

  .fa-lg {
    line-height: $line-height;
    vertical-align: top;
  }
}

@mixin button-form-control($color) {
  @each $theme, $map in $themes {
    $color-text-dark: map-get($map, color-text-dark);

    .#{$theme} & {
      color: $color-text-dark;
      background-color: rgba($color, 0.08);

      &:hover,
      &:focus {
        background-color: rgba($color, 0.2);
        color: $color-text-dark;
      }

      &.active {
        background-color: rgba($color, 0.2);
        color: $color-text-dark;

        &:hover,
        &:focus {
          background-color: rgba($color, 0.3);
          color: $color-text-dark;
        }
      }
    }
  }
}