// stylelint-disable selector-no-qualifying-type

//
// Base styles
//

.btn {
  display: inline-block;
  font-family: $btn-font-family;
  font-weight: $btn-font-weight;
  text-align: center;
  text-decoration: if($link-decoration == none, null, none);
  white-space: $btn-white-space;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: $btn-border-width solid transparent;
  @include button-size(
    $btn-padding-y,
    $btn-padding-x,
    $btn-font-size,
    $btn-line-height,
    $btn-border-radius
  );
  @include transition($btn-transition);

  @include hover() {
    text-decoration: none;
  }

  &:focus,
  &.focus {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
  }

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

  &:not(:disabled):not(.disabled) {
    cursor: if($enable-pointer-cursor-for-buttons, pointer, null);

    &:active,
    &.active {
      @include box-shadow($btn-active-box-shadow);

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

// 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} {
    @include button-variant($value, $value);
  }
}

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

//
// Link buttons
//

// Make a button look and behave like a 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;
  }

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

  // No need for an active state here
}

//
// Button Sizes
//

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

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

//
// Block button
//

.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%;
  }
}

// Primary buttons
//
// The primary action is generally the action that completes a task or desired action.
// Primary buttons use bright and use saturated colors to provide stronger visual weight that catches the users attention to avoid confusion and competing with secondary actions.
//
// Markup:
// <button class="btn btn-primary">primary button</button>
//
// Styleguide 2.1.1
.btn-primary {
  color: $white;
  text-transform: uppercase;

  &:hover {
    color: $white;
  }

  &:focus,
  &.focus {
    color: $white;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $white;
  }

  &.disabled,
  &:disabled {
    color: $white;
  }
}

// Secondary buttons
//
// A secondary action is not as important as a primary action. You should give secondary buttons less visual weight than primary actions.
// Less saturated colors are used on secondary buttons resulting in distinguishable buttons that don't stand out as much as primary buttons.
//
// Markup:
// <button class="btn btn-secondary">secondary button</button>
//
// Styleguide 2.1.2
.btn-secondary {
  text-transform: uppercase;
}

// Outline buttons
//
// Markup:
// <button type="button" class="btn btn-outline-primary">Primary</button>
// <button type="button" class="btn btn-outline-secondary">Secondary</button>
//
// Styleguide 2.1.3

.btn-outline-primary {
  text-transform: uppercase;

  &:hover,
  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active {
    color: $white;
  }

  &.disabled,
  &:disabled {
    color: $primary;
  }
}

.btn-outline-secondary {
  text-transform: uppercase;
}

.btn-outline-info {
  text-transform: uppercase;
}

// Loading button
//
// Markup:
// <button type="button" class="btn btn-primary btn-loading">Primary</button>
// <button type="button" class="btn btn-secondary btn-loading">Secondary</button>
//
// Styleguide 2.1.4

.btn-loading {
  pointer-events: none;
  &:after {
    @include loader-component;
    height: 9px;
    width: 9px;
  }
  &.btn-sm {
    &:after {
      height: 7px;
      width: 7px;
    }
  }
  &.btn-lg {
    &:after {
      height: 10px;
      width: 10px;
    }
  }
}

// Button Sizes
//
// Markup:
// <button type="button" class="btn btn-primary btn-lg">Large button</button>
// <button type="button" class="btn btn-primary">Normal button</button>
// <button type="button" class="btn btn-primary btn-sm">Small button</button>
//
// Styleguide 2.1.5

// Button Size styles are inherited directly from Bootstrap since related variables already were changed.

// Header list buttons
//
// Markup:
// <div>
//   <button type="button" class="btn btn-header-list">Sort by</button>
//   <button type="button" class="btn btn-header-list">Filters</button>
// </div>
//
// Styleguide 2.1.6
.btn-header-list {
  font-size: 0.875rem;
  font-family: $font-family-secondary;
  text-transform: uppercase;
  text-align: left;
  background-color: $gray-100;
  padding: 10px;
  border-radius: 5px;
  margin-right: 15px;
}

// Generic fixes
.btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}