$btn-font-weight: $font-weight-bold !default;
$btn-padding-y: 1rem !default;
$btn-padding-x: 4rem !default;
$btn-disabled-bg: #a0a0a0 !default;
$btn-border-radius: 0 !default;

@mixin btn-insert-overlay {
   $btn-border-width: 0 !default;

   position: absolute;
   left: -$btn-border-width;
   right: -$btn-border-width;
   top: -$btn-border-width;
   bottom: -$btn-border-width;
   z-index: 1;
}

.btn {
   @include underline-never;

   appearance: none;
   border: 0;
   cursor: pointer;
   display: inline-block;
   font-weight: $btn-font-weight;
   letter-spacing: .12em;
   padding: $btn-padding-y $btn-padding-x;
   text-align: center;
   text-transform: uppercase;
   transition: all $transition-speed;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;

   @media screen and (max-width: $xl - 1) {
      padding-left: calc($btn-padding-x / 2);
      padding-right: calc($btn-padding-x / 2);
   }

   @media screen and (max-width: $sm - 1) {
      white-space: normal;
   }
}

.btn-primary {
   @include button-variant($white, $brand-primary, $brand-primary);
}

.btn-ctr {
   color: $white;
   background-color: $brand-ctr;

   @include haf {
      color: $white;
      background-color: darken($brand-ctr, 3%);
   }
}

.btn-insert {
   flex-grow: 1;
   padding: 13px 5px;
   position: relative;

   &::before {
      @include btn-insert-overlay;
      @include fonticon;

      background-color: $brand-ctr;
      content: $icons_check;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      opacity: 0;
   }

   /* tocici se kolecko */
   .add-to-cart-loader {
      @include btn-insert-overlay;

      background-color: $brand-ctr;

      &::before {
         animation: add-to-cart-loader 1.25s infinite linear;
         border: 3px solid $white;
         border-radius: 50%;
         border-right-color: transparent;
         content: "";
         display: block;
         position: absolute;
         left: calc(50% - 15px);
         top: calc(50% - 15px);
         width: 30px;
         height: 30px;
      }
   }

   &.btn-product-added::before {
      opacity: 1;
      z-index: 1;
   }

   @media screen and (max-width: $xl - 1) and (min-width: $sm) {
      letter-spacing: normal;
   }
}

.btn-fav {
   background: #f8f8f8;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 47px;
   height: 47px;
   margin-left: 1px;
   flex-shrink: 0;

   @include haf {
      color: $red;
   }

   &.active {
      color: $red;

      .fc::before {
         content: $icons_heart-full;
      }
   }
}

.btn-fav-rounded {
   background: $white;
   width: 36px;
   min-width: 36px;
   height: 36px;
   font-size: 1rem;
   border-radius: 50%;
   margin: -4px 0 0 10px;
   box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.btn-secondary {
   @include button-variant($brand-primary, transparent, $brand-primary);

   border: 1px solid $brand-primary;

   @include haf {
      background-color: $brand-primary;

      @if (lightness($brand-primary) > 45) {
         color: $text-dark;
      } @else {
         color: $white;
      }
   }
}

.btn-white {
   color: $black;
   background-color: $white;

   @include haf {
      background-color: darken($white, 8%);
   }
}

.btn-muted {
   background: #f8f8f8;
   color: $black;

   @include haf {
      background: $black;
      color: $white;
   }
}

/* pager */
.btn-loader {
   @extend .btn-secondary;
}

.btn-pager {
   background: $body-bg-alt;
   color: $black;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   width: 55px;
   height: 55px;

   @include haf {
      color: $black;
      background: #ddd;
   }

   &[disabled] {
      pointer-events: none;
      opacity: .6;
   }
}

.btn-pager-next {
   margin-left: 10px;
}

.btn-pager-prev {
   margin-right: 10px;
}

/* sizes */
.btn-lg {
   padding: $btn-padding-y*2 $btn-padding-x*2;
}

.btn-sm {
   font-weight: 400;
   letter-spacing: normal;
   padding: $btn-padding-y*.5 $btn-padding-x*.5;
}

.btn-block {
   display: block;
   padding-right: 10px;
   padding-left: 10px;
   width: 100%;

   + .btn-block {
      margin-top: .5rem;
   }
}

.btn-link {
   background: transparent;
   border-bottom: 2px solid transparent;
   color: $black;
   font-weight: $font-weight-bold;
   letter-spacing: $letter-spacing-lg;
   padding: 0;
   text-transform: uppercase;
   transition: border-bottom-color $transition-speed;

   @include haf {
      border-bottom-color: $black;
      color: $black;
   }
}

// na konci aby prebijel predchozi deklarace
.btn.disabled,
.btn:disabled {
   background-color: $btn-disabled-bg;
   border-color: $btn-disabled-bg;
   color: $white;
   pointer-events: none;
}


.btn-fcb {
   background-color: #3b5999;
   border-color: #3b5999;
   margin-bottom: 10px;
   white-space: normal;

   span {
      margin: 0 15px 0 -15px;
      font-size: 20px;
   }

   @include haf {
      border-color: darken(#3b5999, 10%);
      background-color: darken(#3b5999, 10%);
   }
}

.btn-ordering-laststep {
   display: flex;
   justify-content: center;
   align-items: center;

   &::before {
      @include fonticon;

      content: $icons_check;
      margin-right: 10px;
      font-size: 18px;
      position: relative;
      margin-top: -1px;
   }
}

@keyframes add-to-cart-loader {
   0% {
      transform: rotate(0);
   }

   100% {
      transform: rotate(360deg);
   }
}
