// scss-lint:disable QualifyingElement

// // Base styles //

.btn {

display: inline-block;
font-weight: $btn-font-weight;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: $input-btn-border-width solid transparent;
@include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
@include transition($btn-transition);

// Share hover and focus styles
@include hover-focus {
  text-decoration: none;
}
&:focus,
&.focus {
  outline: 0;
  box-shadow: $btn-focus-box-shadow;
}

// Disabled comes first so active can properly restyle
&.disabled,
&:disabled {
  opacity: .65;
  @include box-shadow(none);
}

&:active,
&.active {
  background-image: none;
  @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
}

}

// Future-proof disabling of clicks on `<a>` elements a.btn.disabled, fieldset a.btn {

pointer-events: none;

}

// // Alternate buttons //

@each $color, $value in $theme-colors {

.btn-#{$color} {
  @include button-variant($value, $value);
}

}

@each $color, $value in $theme-colors {

.btn-outline-#{$color} {
  @include button-outline-variant($value, #fff);
}

}

// // Link buttons //

// Make a button look and behave like a link .btn-link {

font-weight: $font-weight-normal;
color: $link-color;
border-radius: 0;

&,
&:active,
&.active,
&:disabled {
  background-color: transparent;
  @include box-shadow(none);
}
&,
&:focus,
&:active {
  border-color: transparent;
  box-shadow: none;
}
@include hover {
  border-color: transparent;
}
@include hover-focus {
  color: $link-hover-color;
  text-decoration: $link-hover-decoration;
  background-color: transparent;
}
&:disabled {
  color: $btn-link-disabled-color;

  @include hover-focus {
    text-decoration: none;
  }
}

}

// // Button Sizes //

.btn-lg {

@include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);

}

.btn-sm {

@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);

}

// // Block button //

.btn-block {

display: block;
width: 100%;

}

// Vertically space out multiple block buttons .btn-block + .btn-block {

margin-top: $btn-block-spacing-y;

}

// Specificity overrides input, input, input {

&.btn-block {
  width: 100%;
}

}