@import "~bootstrap/scss/buttons";

$x-btn-text-uppercase: true !default;
$x-btn-text-white:     true !default;


@if ($x-btn-text-white) {
  .btn-warning {
    @extend .text-white;
  }
  .btn-outline-warning {
    @include x-hover-focus-active {
      @extend .text-white;
    }
  }
}

// Remove focus outline styles
.x-no-focus:focus {
  outline: none !important;
  box-shadow: none !important;
}

// Rounded Btn
.x-btn-rounded {
  @extend .btn,
          .text-uppercase;
  border-radius: $border-radius;
}

// Btn with loading icon
.x-btn-loading {
  @extend .position-relative;

  .x-btn-label {
    @extend .fade; // Hide Label but maintain btn width
  }

  .x-loader {
    @extend .position-absolute;
    .x-icon {
      font-size: 2.5em; // Loader size based on btn size
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    .x-loader {
      @if not ($color == "light" or $color == "light-secondary" or $color == "light-transparent") {
        @extend .text-white;
      }
    }
  }
}