$btn-border-width: 1px;
$btn-border-radius: $border-radius-base;
$btn-font-family: $font-family-heading;
$btn-font-size: $font-size-smaller;
$btn-font-weight: $font-weight-bold;
$btn-letter-spacing: $letter-spacing-lg;
$btn-line-height: 2;
$btn-padding-y: 10px;
$btn-padding-x: 28px;
$btn-disabled-bg: #a0a0a0 !default;
$btn-text-transform: uppercase;

@mixin btn-sm {
   padding: 6px 20px 4px;
}

@mixin btn-secondary {
   @include button-variant($text-dark, $body-bg-alt, $body-bg-alt);
}

@mixin btn-loader {
   @extend .btn-primary;

   width: 100%;
   max-width: 294px;
}

@mixin btn-pager {
   @extend .btn-secondary;

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

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

@import "@css[shared]/components/_btns";

.btn {
   padding: 12px 28px 8px;
}

.btn-pager {
   padding: 12px 17px 8px;
}

.btn-scroll-top {
   @extend .btn-secondary;

   &::before {
      @include fonticon;

      content: $icons_caret-up;
      margin-right: 10px;
      position: relative;
      top: 2px;
   }
}

.btn-white-outline {
   border-color: $white;
   color: $white;
   background-color: transparent;

   @include haf {
      color: $text-dark;
      background-color: $white;
   }
}

.btn-dark-outline {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-color: $border-color;
   color: $text-dark;
   background-color: transparent;
   border-inline: 0;
   border-radius: 0;
   padding-inline: 10px;

   @include haf {
      color: $text-dark;
      background-color: $border-color;
   }

   &::after {
      @include fonticon;

      content: $icons_caret-up;
      transition: transform $transition-speed;
   }
}

.btn-white {
   @include button-variant($text-dark, $white, $white);
}
