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

.wpj-carousel-container {
   overflow: hidden;
   position: relative;
}

.wpj-carousel-gallery {
   display: flex;
   width: 100000px;
   white-space: nowrap;
   position: relative;
   left: 0;
   transition: left $transition-speed;

   > * {
      display: block;
   }

   > div {
      padding: 0;
   }
}

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

   button {
      display: inline-block;
      text-decoration: inherit;
      text-rendering: optimizeLegibility;
      text-transform: none;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      padding: 0;
      transition: all $transition-speed;
      cursor: pointer;

      @if mixin-exists(wpj-carousel-btn) {
         @include wpj-carousel-btn;
      } @else {
         background: $body-bg;
         border: 1px solid $border-color;
         width: 60px;
         height: 60px;
         color: $brand-primary;
         font-size: 12px;

         @include haf {
            color: $brand-ctr;
         }
      }

      &:first-child {
         left: 0;
      }

      &:last-child {
         right: 0;
      }

      &.disabled {
         display: none;
      }
   }

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

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