@mixin wpj-carousel-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 70px;
   height: 70px;
   background: $brand-primary;
   color: $white;
   top: 50%;
   margin-top: -110px;
   border: 0;

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

@import "@css[shared]/components/_wpj-carousel";

.wpj-carousel-gallery > div {
   padding: 0;
}

#home-products {
   .wpj-carousel-controls {
      button {
         margin-top: -45px;
         width: 50px;
         height: 50px;
      }
   }
}

.wpj-carousel-controls {
   width: 100%;
   top: 50%;
   position: absolute;
   z-index: 10000;
   left: 0;
   right: 0;

   button {
      border-radius: 0;

      &:first-child {
         left: 0;
      }

      &:last-child {
         right: 0;
      }
   }

   @media screen and (max-width: $sm - 1) {
      button {
         width: 42px;
         height: 42px;
         font-size: $font-size-smaller;
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .wpj-carousel-controls {
      display: none;
   }
}

.wpj-carousel-gallery {
   white-space: normal;
}
