$brand-primary: #000 !default;
$white: #fff !default;
$transition-speed: .3s !default;
$blocek-gutter: 10px !default;

$wpj-slider-squareitem-width: 340px !default;

$wpj-controls-position: absolute !default;
$wpj-controls-justify-content: space-between !default;
$wpj-controls-top: 50% !default;
$wpj-controls-right: 0 !default;
$wpj-controls-left: 0 !default;
$wpj-controls-bottom: 0 !default;
$wpj-controls-transform: translateY(-50%) !default;
$wpj-controls-margin: 0 !default;

.wpj-slider-wrapper {
   position: relative;
   overflow: hidden;
   container-type: inline-size;

   .wpj-slider-controls {
      display: flex;
      width: 100%;
      height: 0;
      justify-content: $wpj-controls-justify-content;
      position: $wpj-controls-position;
      top: $wpj-controls-top;
      left: $wpj-controls-left;
      right: $wpj-controls-right;
      bottom: $wpj-controls-bottom;
      transform: $wpj-controls-transform;
      z-index: 1;

      button {
         position: absolute;
         margin: $wpj-controls-margin;

         @if mixin-exists(wpj-slider-controls-button) {
            @include wpj-slider-controls-buttons;
         } @else {
            background-color: $brand-primary;
            border-color: $brand-primary;
            color: $white;

            @include haf {
               background-color: darken($brand-primary, 10%);
               border-color: darken($brand-primary, 10%);
               color: $white;
            }
         }

         &:first-child {
            left: 0;
         }

         &:last-child {
            right: 0;
         }

         &.disabled {
            display: none;
         }
      }

      svg {
         fill: currentColor;
      }
   }
}

.wpj-slider-carousel {
   &,
   > .wpj-b-row {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      gap: $blocek-gutter;
      transition: transform $transition-speed;
   }

   > div:first-child:last-child {
      min-width: 100%;
   }

   .catalog-row {
      display: flex;
      flex-wrap: nowrap;

      > div {
         flex-basis: $wpj-slider-squareitem-width;
         max-width: $wpj-slider-squareitem-width;
         min-width: $wpj-slider-squareitem-width;

         @media screen and (max-width: 544px) {
            flex-basis: calc($wpj-slider-squareitem-width * .85);
            max-width: calc($wpj-slider-squareitem-width * .85);
            min-width: calc($wpj-slider-squareitem-width * .85);
         }
      }
   }

   .w-gallery {
      display: flex;
      flex-wrap: nowrap;
   }

   .w-gallery [data-blocek-col],
   .wpj-b-row > [data-blocek-col],
   > [data-blocek-col] {
      flex-basis: $wpj-slider-squareitem-width;
      max-width: $wpj-slider-squareitem-width;
      min-width: $wpj-slider-squareitem-width;

      @media screen and (max-width: 544px) {
         flex-basis: calc($wpj-slider-squareitem-width * .85);
         max-width: calc($wpj-slider-squareitem-width * .85);
         min-width: calc($wpj-slider-squareitem-width * .85);
      }
   }
}

.wpj-blocek.wpj-blocek-active {
   .wpj-slider-carousel {
      overflow-x: scroll;
   }
}
