@import "~bootstrap/scss/buttons";

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

//.btn-sm {
//  font-size: $small-font-size;
//}

@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;

    color: inherit!important;

    .x-icon {
      font-size: 1.6em; // 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;
      }
    }
  }
}

// Responsive Button Size
.x-btn-lg {
  @include media-breakpoint-up(sm) {
    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
  }
}

.x-btn-input-utility {
  @extend .btn,
          .btn-link,
          .p-0,
          .text-primary-lighter,
          .btn-sm,
          .position-absolute;
  right: 1rem;
  bottom: 0.55rem;
}