@import "../variables/color";
@import "../variables/components";
@import "../variables/options";
@import "../variables/global";
@import "../variables/buttons";
@import "../base/mixins";

@import "../mixins/border-radius";
@import "../mixins/box-shadow";
@import "../mixins/transition";
@import "../mixins/buttons";
@import "../mixins/links";
@import "../utilities/screenreaders";

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

//
// Base styles
//

.btn {
  position:relative;
  display: inline-block;
  @include font-weight($btn-font-weight);
  text-align: center;
  letter-spacing: 1px;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  background-color: $btn-default-bg-color;
  color: $secondary; //color: $black;
  border: 0; //$btn-border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
  @include transition($btn-transition);

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

  //Focus color mixin
  @include focus-color();

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

  // Opinionated: add "hand" cursor to non-disabled .btn elements
  &:not(:disabled):not(.disabled) {
    cursor: pointer;
  }

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

    @include focus-color();
  }
  .icon {
    vertical-align: text-bottom;
  }
}

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

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

  /********************************************
  * Default Button Variants
  ********************************************/

  .btn-#{$color} {
    color: map-get($button-font-colors, $color);
    background: $value;
    border-color: $value;

    @media (hover: hover) {
      @include hover() {
        background: map-get($button-hover-colors, $color);
        border-color: map-get($button-hover-colors, $color);
      }
    }

    &:focus-visible,
    &.focus {
      background: map-get($button-hover-colors, $color);
      border-color: map-get($button-hover-colors, $color);
      outline: 2px solid map-get($button-hover-colors, $color);
      box-shadow: inset 0px 0px 0px 2px map-get($button-focus-colors, $color);
    }

    &:active {
      background: map-get($button-active-colors, $color);
      border-color: map-get($button-active-colors, $color);
    }
  }

  /********************************************
  * Outline Button Variants
  ********************************************/

  .btn-outline-#{$color} {
    color: $value;
    background-color: transparent;
    background-image: none;
    box-shadow: inset 0 0 0 2px $value;  

    @media (hover: hover) {
      @include hover() {
        @if $color == "white" {
          color: $gray-90;
        } @else {
          color: map-get($main-theme-font-colors, $color);
        }  
        background: map-get($button-hover-colors, $color);
        border-color: map-get($button-hover-colors, $color);
        box-shadow: unset;
      }
    }

    &:focus-visible,
    &.focus {
      @if $color == "white" {
        color: $gray-90;
      } @else {
        color: map-get($main-theme-font-colors, $color);
      }      
      background: map-get($button-hover-colors, $color);
      border-color: map-get($button-hover-colors, $color);
      outline: 2px solid map-get($button-hover-colors, $color);
      box-shadow: inset 0px 0px 0px 2px map-get($button-focus-colors, $color);
    }

    &:active {
      color: map-get($main-theme-font-colors, $color);
      background: map-get($button-active-colors, $color);
      border-color: map-get($button-active-colors, $color);
    }

    &.disabled,
    &:disabled {
      color: $value;
      background-color: transparent !important;
      box-shadow: inset 0 0 0 2px $value;
    }
  }

  /********************************************
  * Link Button Variants
  ********************************************/

  .btn-link-#{$color} {
    color: $value;
    background-color: transparent;
    background-image: none;
    text-decoration: $link-decoration;
    padding-left: 0 !important;
    padding-right: 0 !important;

    @media (hover: hover) {
      &:hover {
        color: map-get($button-hover-colors, $color);
        text-decoration: $link-hover-decoration;
        background-color: transparent;
      }
    }
  
    &:focus-visible,
    &.focus {
      color: map-get($button-hover-colors, $color);
      outline: none;
      background-color: transparent;
      box-shadow: 0px 0px 0px 2px map-get($button-hover-colors, $color);
      text-decoration: $link-hover-decoration;
    }

    &:active,
    &.active {
      color: map-get($button-active-colors, $color);
      background: transparent;
      box-shadow: none;
    }
  
    &:disabled,
    &.disabled {
      color: $value;
    }
    &.btn-icon{
      border-radius: 50%;

      @media (hover: hover) {
        &:hover {
          color: map-get($button-hover-colors, $color);

          @if $color == 'white' or $color == 'gray' {
            background-color: rgba($white, .1);
            background-blend-mode: screen;
          } @else {
            background-color: $smoke;
            background-blend-mode: multiply;
          }
        }
      }
    
      &:focus-visible,
      &.focus {
        color: map-get($button-hover-colors, $color);
        @if $color == 'white' or $color == 'gray' {
          background-color: rgba($white, .1);
          background-blend-mode: screen;
        } @else {
          background-color: $smoke;
          background-blend-mode: multiply;
        }
        box-shadow: 0px 0px 0px 2px map-get($button-hover-colors, $color);
      }
  
      &:active,
      &.active {
        color: map-get($button-active-colors, $color);
      }
    } 
  }
}

.btn-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  .icon-sm {
    font-size:1rem;
  }

  .icon-md {
    font-size:1.25rem;
  }  

  .icon-lg {
    font-size:1.5rem;
  }
}

.btn-outline {
  @extend .btn-outline-primary;
}

.btn-icon {
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.5rem 1rem;
  height: 40px;
  width: 40px;
}

.btn-icon-right {
  padding-right: $btn-padding-x;
  position: relative;
}

.btn-icon-left {
  padding-left: $btn-padding-x;
  position: relative;
}

.icon-left {
  margin-right: 0.5rem;
}

.icon-right {
  margin-left: 0.5rem;
}

.btn-nav,
.btn-link-nav {
  &:not(.btn-icon){
    @include header-list-link;
  }
  &.btn-icon{
    color: $header-copy;
    background-color: transparent;
    background-image: none;
    border-radius: 50%;
    @media (hover: hover) {
      &:hover {
        color: $header-copy;
        background-color: $smoke;
        background-blend-mode: multiply;
      }
    }
    &:focus-visible,
    &.focus {
      color: $header-copy;
      background-color: $smoke;
      background-blend-mode: multiply;
      box-shadow: 0px 0px 0px 2px $header-copy;
      outline:0;
    }
  } 
}

//
// Button Sizes
//

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

  &.btn-icon {
    font-size: 1.25rem;
    // padding: 0.875rem 1.125rem;
    width: 48px;
    height: 48px;
  }

  &.btn-icon-right {
    position: relative;
    .icon {
      height: 1.2rem !important;
      width: 1.2rem !important;
      .icon-inner {
        height: 1.2rem !important;
        width: 1.2rem !important;
      }
      svg {
        position: absolute;
        right: 0;
        top: 3px;
        height: 1.2rem !important;
        width: 1.2rem !important;
      }
    }
  }

  &.btn-icon-left {
    position: relative;
    .icon {
      height: 1.2rem !important;
      width: 1.2rem !important;
      .icon-inner {
        height: 1.2rem !important;
        width: 1.2rem !important;
      }
      svg {
        position: absolute;
        right: 0;
        top: 3px;
        height: 1.2rem !important;
        width: 1.2rem !important;
      }
    }
  }
}

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

  &.btn-icon {
    font-size: 0.85em;
    // padding: 0.625rem;
    width: 2rem;
    height: 2rem;
  }

  &.btn-icon-right {
    padding-right: $btn-padding-x-sm;
    position: relative;
    .icon {
      height: 0.8rem !important;
      width: 0.8rem !important;
      .icon-inner {
        height: 0.8rem !important;
        width: 0.8rem !important;
      }
      svg {
        position: absolute;
        right: 0;
        top: 0.06rem;
        height: 0.8rem !important;
        width: 0.8rem !important;
      }
    }
  }

  &.btn-icon-left {
    padding-left: $btn-padding-x-sm;
    position: relative;
    .icon {
      height: 0.8rem !important;
      width: 0.8rem !important;
      .icon-inner {
        height: 0.8rem !important;
        width: 0.8rem !important;
      }
      svg {
        position: absolute;
        right: 0;
        top: 0.06rem;
        height: 0.8rem !important;
        width: 0.8rem !important;
      }
    }
  }
}

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

/* Need to set pointer-events because the outer container has the onclick event and isn't disabled when the button is */
.button-disabled {
  pointer-events: none;
}

/* The button is disabled we don't want to change the style in that state */
.loading {
  opacity: 1 !important;
}