kupshop/web/common/twig/scss/variables/_buttons.scss

$btn-border-width: $border-width !default;
$btn-border-radius: $border-radius-base !default;
$btn-font-family: null !default;
$btn-font-size: null !default;
$btn-font-weight: $font-weight-bold !default;
$btn-line-height: null !default;
$btn-padding-y: .9rem !default;
$btn-padding-x: 1rem !default;
$btn-padding-y-sm: .5rem !default;
$btn-padding-x-sm: .75rem !default;
$btn-padding-y-lg: 1rem !default;
$btn-padding-x-lg: 2rem !default;
$btn-text-transform: null !default;
$btn-letter-spacing: null !default;
$btn-disabled-bg: #a0a0a0 !default;

@mixin btn {
   @include underline-never;

   display: inline-flex;
   gap: $gap-width;
   align-items: center;
   justify-content: center;
   appearance: none;
   border: $btn-border-width solid transparent;
   border-radius: $btn-border-radius;
   cursor: pointer;
   font-family: $btn-font-family;
   font-size: $btn-font-size;
   font-weight: $btn-font-weight;
   letter-spacing: $btn-letter-spacing;
   line-height: $btn-line-height;
   padding: $btn-padding-y $btn-padding-x;
   text-align: center;
   text-transform: $btn-text-transform;
   transition: all $transition-speed;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
}

@mixin btn-disabled {
   @if mixin-exists(shop-btn-disabled) {
      @include shop-btn-disabled;
   } @else {
      pointer-events: none;
      background-color: $btn-disabled-bg;
      border-color: $btn-disabled-bg;
      color: $white;
   }
}

@mixin btn-primary {
   @if mixin-exists(shop-btn-primary) {
      @include shop-btn-primary;
   } @else {
      @include button-variant($white, $brand-primary, $brand-primary);
   }
}

@mixin btn-ctr {
   @if mixin-exists(shop-btn-ctr) {
      @include shop-btn-ctr;
   } @else {
      @include button-variant($white, $brand-ctr, $brand-ctr);
   }
}

@mixin btn-secondary {
   @if mixin-exists(shop-btn-secondary) {
      @include shop-btn-secondary;
   } @else {
      @include button-variant($white, $brand-secondary, $brand-secondary);
   }
}

@mixin btn-secondary-outline {
   @if mixin-exists(shop-btn-secondary-outline) {
      @include shop-btn-secondary-outline;
   } @else {
      @include button-variant($brand-secondary, transparent, $brand-secondary);

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

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

@mixin btn-white {
   @if mixin-exists(shop-btn-white) {
      @include shop-btn-white;
   } @else {
      @include button-variant($black, $white, $white);
   }
}

@mixin btn-white-transparent {
   @if mixin-exists(shop-btn-white-transparent) {
      @include shop-btn-white-transparent;
   } @else {
      @include button-variant($white, rgba($white, 0.2), rgba($white, 0.2));
   }
}

@mixin btn-gray-dark {
   @if mixin-exists(shop-btn-gray-dark) {
      @include shop-btn-gray-dark;
   } @else {
      @include button-variant($white, $gray-dark, $gray-dark);
   }
}

@mixin btn-alt-outline {
   @if mixin-exists(shop-btn-alt-outline) {
      @include shop-btn-alt-outline;
   } @else {
      @include button-variant($text-dark, $body-bg-alt, $border-color);
   }
}

@mixin btn-primary-outline {
   @if mixin-exists(shop-btn-primary-outline) {
      @include shop-btn-primary-outline;
   } @else {
      @include button-variant($brand-primary, transparent, $brand-primary);

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

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

@mixin btn-outline {
   @if mixin-exists(shop-btn-outline) {
      @include shop-btn-outline;
   } @else {
      @include button-variant($text-dark, $white, $border-color);

      box-shadow: $box-shadow;
   }
}

@mixin btn-loader {
   @if mixin-exists(shop-btn-loader) {
      @include shop-btn-loader;
   } @else {
      @extend .btn-secondary;
   }
}

@mixin btn-pager {
   @if mixin-exists(shop-btn-pager) {
      @include shop-btn-pager;
   } @else {
      color: $text-dark;
   }
}

@mixin btn-lg {
   @if mixin-exists(shop-btn-lg) {
      @include shop-btn-lg;
   } @else {
      padding: $btn-padding-y-lg $btn-padding-x-lg;
   }
}

@mixin btn-sm {
   @if mixin-exists(shop-btn-sm) {
      @include shop-btn-sm;
   } @else {
      font-weight: $font-weight-base;
      letter-spacing: normal;
      padding: $btn-padding-y-sm $btn-padding-x-sm;
   }
}

@mixin btn-link {
   @if mixin-exists(shop-btn-link) {
      @include shop-btn-link;
   } @else {
      @include underline-hover;

      display: inline-flex;
      align-items: center;
      background: transparent;
      border: 0;
      cursor: pointer;
      font-weight: $btn-font-weight;
      gap: $gap-width;

      .c-icon {
         color: $brand-primary;
         transition: transform $transition-speed;
      }

      @include haf {
         .c-icon {
            transform: translateX(3px);
         }
      }
   }
}

@mixin btn-watchdog {
   @if mixin-exists(shop-btn-watchdog) {
      @include shop-btn-watchdog;
   } @else {
      @include button-variant($white, $brand-secondary, $brand-secondary);
   }
}

@mixin btn-error {
   @if mixin-exists(shop-btn-watchdog) {
      @include shop-btn-watchdog;
   } @else {
      @include button-variant($white, $state-error, $state-error);
   }
}

@mixin set-btn-style($mixin-name) {
   @if ($mixin-name == "btn-primary") {
      @include btn-primary;
   } @else if ($mixin-name == "btn-ctr") {
      @include btn-ctr;
   } @else if ($mixin-name == "btn-secondary") {
      @include btn-secondary;
   } @else if ($mixin-name == "btn-white") {
      @include btn-white;
   } @else if ($mixin-name == "btn-alt-outline") {
      @include btn-alt-outline;
   } @else if ($mixin-name == "btn-primary-outline") {
      @include btn-primary-outline;
   } @else if ($mixin-name == "btn-outline") {
      @include btn-outline;
   } @else if ($mixin-name == "btn-gray-dark") {
      @include btn-gray-dark;
   } @else if ($mixin-name == "btn-white-transparent") {
      @include btn-white-transparent;
   }
}