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


//
// Link buttons
//

%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;
    box-shadow: none;
  }

  .active{
    text-decoration: underline;
  }
}

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

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


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


//
// Loading
//
.x-btn-loading {
  position: relative;

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

  .x-loader {
    @extend %text-reset;
    position: absolute;
    height: 100%;

    .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") {
        color: theme-color("white");
      }
    }
  }
}

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


//
// Button Utility
//
.x-btn-input-utility {
  @extend %btn,
          %btn-link,
          %btn-sm;
  right: 1rem;
  bottom: 0.55rem;
  position: absolute;
  padding: 0;
  color: theme-color("primary-lighter");
}


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


//
// Matters document list custom button for hover state
//
.x-btn-icon-action {
  @extend %x-btn-icon-only-md,
          %x-btn-default,
          %btn-sm;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: $border-radius;

  .x-avatar-group &,
  .x-file-complex & {
    color: theme-color("info");
    background-color: transparent;
    border-color: transparent;
  }
  .x-avatar-group:hover &
  .x-file-complex:hover & {
    color: theme-color("info");
    background-color: $white;
    border-color: $border-color;
  }
}


.x-btn-card-action {
  @extend %w-100,
          %x-btn-primary,
          %btn-sm,
          %x-no-focus;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-color: transparent !important;
  background-color: var(--custom-theme-primary-darker, theme-color('primary-darker')) !important;
}