//
// Base styles
//
.btn {
  cursor: pointer;
  display: inline-block;
  font-family: $font-family-secondary;
  font-weight: $btn-font-weight;
  letter-spacing: .1em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: $btn-border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
  transition: $btn-transition;

  // Share hover and focus styles
  @include hover-focus {
    text-decoration: none;
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    cursor: not-allowed;
  }

  &.disabled {
    @include button-variant($brand-primary, $gray-lightest, $gray-lightest, $gray-lightest, $gray-lightest);
  }

  &.ajax-loading {
    .spinner {
      width: 1.25rem !important;
      & > div {
        visibility: visible;
        transition-delay: 0;
      }
    }
  }
  .spinner {
    display: inline-block;
    transition: width 200ms;
    width: 0;
    & > div {
      visibility: hidden;
      transition: visibility 200ms 200ms;
    }
  }
  .icon {
    font-size: $btn-icon-font-size;
    position: relative;
    vertical-align: baseline;
  }
  @include media-breakpoint-down(xl) {
    &:not(.btn-icon) {
      letter-spacing: .075em;
      padding-left: .75rem;
      padding-right: .75rem;
      white-space: normal;
    }
  }
  @include media-breakpoint-down(sm) {
    &:not(.btn-icon) {
      font-size: .75rem;
    }
  }
}

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

//
// Alternate buttons
//
// Color buttons
.btn-primary {
  @include button-variant($white, $brand-primary, $brand-primary, darken($brand-primary, 10%), darken($brand-primary, 10%));
}

.btn-default {
  @include button-variant($white, $gray-darker, $gray-darker, lighten($gray-darker, 10%), lighten($gray-darker, 10%));
}

.btn-error {
  @include button-variant($btn-error-color, $btn-error-bg, $btn-error-border, darken($btn-error-bg, 10%), darken($btn-error-border, 10%));
}

.btn-info {
  @include button-variant($state-info-text, $state-info-bg, $white, darken($state-info-bg, 10%), $white);
}

.btn-success {
  @include button-variant($state-success-text, $state-success-bg, $white, darken($state-success-bg, 10%), $white);
}

.btn-white {
  @include button-variant($white, $white, $white, $body-color, $body-color);
}

.btn-gray {
  @include button-variant($white, $gray, $gray, darken($gray, 10%), darken($gray, 10%));
}

.btn-transparent {
  @include button-variant($white, rgba($black, .4), rgba($white, .4), $body-color, $white)
}

// Remove all backgrounds - outlined buttons
.btn-outline-primary {
  @include button-outline-variant($brand-primary);
}

.btn-outline-default {
  @include button-outline-variant($gray-darker);
}

.btn-outline-error {
  @include button-outline-variant($btn-error-bg);
}

.btn-outline-info {
  @include button-outline-variant($state-info-bg);
}

.btn-outline-success {
  @include button-outline-variant($state-success-bg);
}

.btn-outline-white {
  @include button-outline-variant($white);
  @include hover-focus-active {
    color: $body-color;
  }
}

.btn-outline-gray {
  @include button-outline-variant($gray);
}

@each $theme in map-keys($color-scheme) {
  .btn-theme-#{$theme} {
    @include button-variant($white, map-get($color-scheme, $theme), map-get($color-scheme, $theme), darken(map-get($color-scheme, $theme), 10%), darken(map-get($color-scheme, $theme), 10%));
  }
  .btn-outline-theme-#{$theme} {
    @include button-outline-variant(map-get($color-scheme, $theme));
  }
  .btn-outline-hover-theme-#{$theme} {
    &:after,
    &:before {
      background: map-get($color-scheme, $theme);
    }
    @include hover-focus-active {
      border-color: map-get($color-scheme, $theme);
      color: $white;
    }
  }
}

.btn-theme-1 {
  @include button-variant($gray-dark, #d9d9d9, #d9d9d9, darken(#d9d9d9, 10%), darken(#d9d9d9, 10%));
}
.btn-outline-theme-1 {
  @include button-outline-variant(#d9d9d9);
  color: $gray-dark;
  @include hover-focus-active {
    color: $gray-dark;
  }

}

//
// Link buttons
//

// Make a button look and behave like a link
.btn-link {
  font-weight: $font-weight-base;
  color: $link-color;
  border-radius: 0;

  &,
  &:active,
  &.active,
  &:disabled {
    background-color: transparent;
    box-shadow: none;
  }
  &,
  &:focus,
  &:active {
    border-color: transparent;
  }
  @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 {
  // line-height: ensure even-numbered height of button next to large input
  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
  @include media-breakpoint-down(xs) {
    padding-bottom: $btn-padding-y-lg - .25rem;
    padding-top: $btn-padding-y-lg - .25rem;
  }
}
.btn-sm {
  // line-height: ensure proper height of button next to small input
  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
  border-width: 1px;
  min-width: 9.5rem;
  &.ajax-loading {
    padding-left: 1rem;
  }
}

.btn-border-thin {
  border-width: 1px;
}

//
// 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[type="submit"],
input[type="reset"],
input[type="button"] {
  &.btn-block {
    width: 100%;
  }
}

// Button as icon
.btn-icon {
  background: transparent;
  border: none;
  padding: 0;
  .icon {
    display: block;
  }
}


//
// Circle button
//
.btn-circle {
  border-radius: 50%;
  height: $btn-circle-size;
  line-height: $btn-circle-size;
  min-width: 0;
  padding: 0;
  position: relative;
  text-align: center;
  width: $btn-circle-size;
  .icon {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.btn-circle-sm {
  font-size: $font-size-sm;
  height: $btn-circle-size-sm;
  line-height: $btn-circle-size-sm;
  width: $btn-circle-size-sm;
}

.btn-circle-lg {
  font-size: ($btn-circle-size-lg / 2);
  height: $btn-circle-size-lg;
  line-height: $btn-circle-size-lg;
  width: $btn-circle-size-lg;
  .icon {
    font-size: ($btn-circle-size-lg / 1.5);
  }
}