// var for box shadow of gradient buttons
// Buttons
.btn {
  box-shadow: none;
  font-weight: 500;

  // gradient button on hover transition
  &[class*='bg-gradient-'] {
    transition: all 0.2s ease;
    &:hover {
      transform: translateY(-2px);
    }
  }

  // Icon button padding
  &.btn-icon {
    padding: 0.715rem 0.736rem;
  }
  &.btn-sm {
    &.btn-icon {
      padding: 0.5rem;
      line-height: 0.5;
    }
  }
  &.btn-lg {
    &.btn-icon {
      padding: 1rem;
      line-height: 0.75;
    }
  }

  &:focus,
  &.focus,
  &:active,
  &.active {
    outline: none;
    box-shadow: none;
  }

  &:not(:disabled):not(.disabled):active:focus,
  &:not(:disabled):not(.disabled).active:focus {
    box-shadow: none !important;
  }

  // feather icons inside btn
  .feather {
    vertical-align: bottom;
  }
}

// For Waves Input Padding
.btn.waves-input-wrapper {
  padding: 0;
}

@include media-breakpoint-down(sm) {
  .btn-sm-block {
    display: block;
    width: 100%;
  }
}

// Remove cursor-pointer from button if button is disabled
// * setting it to inherit will auto adept cursor
.waves-effect {
  cursor: inherit;
}

// Theme colors
@each $name, $value in $theme-colors {
  // Base
  .btn.btn-#{$name} {
    $color: theme-inverse-color($name);
    $icon-color: theme-inverse-color($name);
    $border-color: $value;
    $bg-color: $value;

    $color-active: theme-inverse-color($name);
    $icon-color-active: theme-inverse-color($name);
    $border-color-active: $value;
    $bg-color-active: $value;

    @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
  }

  // Light
  @if (theme-light-color($name)) {
    .btn.btn-light-#{$name} {
      $color: $value;
      $icon-color: $value;
      $border-color: transparent;
      $bg-color: theme-light-color($name);

      $color-active: theme-inverse-color($name);
      $icon-color-active: theme-inverse-color($name);
      $border-color-active: transparent;
      $bg-color-active: $value;

      @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
    }
  }

  @if ( true or $name == primary or $name == light ) {
    .btn.btn-bg-#{$name} {
      $color: null;
      $icon-color: null;
      $border-color: $value;
      $bg-color: $value;

      $color-active: null;
      $icon-color-active: null;
      $border-color-active: null;
      $bg-color-active: null;

      @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
    }

    .btn.btn-active-#{$name} {
      $color: null;
      $icon-color: null;
      $border-color: null;
      $bg-color: null;

      $color-active: theme-inverse-color($name);
      $icon-color-active: theme-inverse-color($name);
      $border-color-active: $value;
      $bg-color-active: $value;

      @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
    }

    @if (theme-light-color($name)) {
      .btn.btn-active-light-#{$name} {
        $color: null;
        $icon-color: null;
        $border-color: null;
        $bg-color: null;

        $color-active: $value;
        $icon-color-active: $value;
        $border-color-active: null;
        $bg-color-active: theme-light-color($name);

        @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);

        // Don't change the border color for outline style
        &.btn-outline:not(.btn-outline-default) {
          border-color: $value !important;
        }
      }
    }
  }
}

// Theme text colors
@each $name, $value in $theme-text-colors {
  @if ( true or $name == primary or $name == muted ) {
    // Text and icon colors
    .btn.btn-color-#{$name} {
      $color: $value;
      $icon-color: $value;
      $bg-color: null;
      $border-color: null;

      $color-active: null;
      $icon-color-active: null;
      $border-color-active: null;
      $bg-color-active: null;

      @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
    }

    // Text and icon colors active state
    .btn.btn-active-color-#{$name} {
      $color: null;
      $icon-color: null;
      $border-color: null;
      $bg-color: null;

      $color-active: $value;
      $icon-color-active: $value;
      $border-color-active: null;
      $bg-color-active: null;

      @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
    }

    // Icon colors
    .btn.btn-icon-#{$name} {
      $color: null;
      $icon-color: $value;
      $bg-color: null;
      $border-color: null;

      $color-active: null;
      $icon-color-active: null;
      $border-color-active: null;
      $bg-color-active: null;

      @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
    }

    // Icon colors active state
    .btn.btn-active-icon-#{$name} {
      $color: null;
      $icon-color: null;
      $bg-color: null;
      $border-color: null;

      $color-active: null;
      $icon-color-active: $value;
      $border-color-active: null;
      $bg-color-active: null;

      @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
    }

    // Text colors
    .btn.btn-text-#{$name} {
      $color: $value;
      $icon-color: null;
      $bg-color: null;
      $border-color: null;

      $color-active: null;
      $icon-color-active: null;
      $border-color-active: null;
      $bg-color-active: null;

      @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
    }

    // Text colors active state
    .btn.btn-active-text-#{$name} {
      $color: null;
      $icon-color: null;
      $bg-color: null;
      $border-color: null;

      $color-active: $value;
      $icon-color-active: null;
      $border-color-active: null;
      $bg-color-active: null;

      @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
    }
  }
}

// Outline dashed basic style
.btn.btn-outline.btn-outline-dashed {
  border-width: 1px;
  border-style: dashed;

  $color: null;
  $icon-color: null;
  $border-color: null;
  $bg-color: null;;

  $color-active: null;
  $icon-color-active: null;
  $border-color-active: $primary;
  $bg-color-active: null;

  @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
}

// Outline dashed default style
.btn.btn-outline.btn-outline-dashed.btn-outline-default {
  border-width: 1px;
  border-style: dashed;

  $color: $light-inverse;
  $icon-color: $light-inverse;
  $border-color: $gray-300;
  $bg-color: null;

  $color-active: $primary;
  $icon-color-active: $primary;
  $border-color-active: $primary;
  $bg-color-active: $primary-light;

  @include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
}

.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
  pointer-events: none;
  filter: none;
  opacity: 0.65;
}