$x-btn-outline-info-bg:             var(--x-btn-outline-info-bg, inherit) !default;
$x-btn-outline-info-border:         var(--x-btn-outline-info-border, $border-color) !default;
$x-btn-outline-info-color:          var(--x-btn-outline-info-color, theme-color("info")) !default;
$x-btn-outline-info-bg-active:      theme-color("primary-transparent");
$x-btn-outline-info-color-active:   theme-color("primary");

%x-btn-outline-info,
.x-btn-outline-info {
	@include x-btn-info ($x-btn-outline-info-bg,$x-btn-outline-info-border,$x-btn-outline-info-color,$x-btn-outline-info-bg-active,$x-btn-outline-info-color-active);
}




//
// Link buttons
//

// Make a button look and behave like a link
%btn-link,
.btn-link {
  font-weight: $font-weight-normal;
  color: $link-color;
  text-decoration: $link-decoration;

  @include hover {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
  }

  &:focus,
  &.focus {
    text-decoration: $link-hover-decoration;
    box-shadow: none;
  }

  &:disabled,
  &.disabled {
    color: $btn-link-disabled-color;
    pointer-events: none;
  }

  &:active,
  &:focus,
  &:active:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  .active{
    text-decoration: underline;
  }
}

.active .btn-link {
  text-decoration: underline;
}





//
// Block button
//
%btn-block,
.btn-block {
  display: block;
  width: 100%;

  // Vertically space out multiple block buttons
  + .btn-block {
    margin-top: $btn-block-spacing-y;
  }
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.btn-block {
    width: 100%;
  }
}


// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}


//
// Alternate buttons
//
@each $color, $value in $theme-colors {
  %btn-#{$color},
  .btn-#{$color} {
    @include button-variant($value, $value);
    .x-loader {
      @if not ($color == "light" or $color == "light-secondary" or $color == "light-transparent") {
        color: theme-color("white");
      }
    }
  }
}

@each $color, $value in $theme-colors {
  %btn-outline-#{$color},
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}

@if ($x-btn-text-white) {
  .btn-warning {
    color: theme-color("white");
  }
  .btn-outline-warning {
    @include x-hover-focus-active {
      color: theme-color("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
    }
  }
}