kupshop/web/common/twig/scss/base/_tiny-slider.scss

@use "@twig/scss/_global" as global;

// Version: 2.9.2
.tns-outer {
   padding: 0 !important; // remove padding: clientWidth = width + padding (0) = width

   [hidden] {
      display: none !important;
   }

   [aria-controls], [data-action] {
      cursor: pointer;
   }
}

.tns-slider {
   transition: all 0s;
}

.tns-horizontal {
   &.tns-subpixel {
      white-space: nowrap;

      > .tns-item {
         display: inline-block;
         vertical-align: top;
         white-space: normal;
      }
   }

   &.tns-no-subpixel {
      &::after {
         content: "";
         display: table;
         clear: both;
      }

      > .tns-item {
         float: left;
      }
   }

   &.tns-carousel {
      &.tns-no-subpixel {
         > .tns-item {
            margin-right: -100%;
         }
      }
   }
}

.tns-no-calc {
   position: relative;
   left: 0;
}

.tns-autowidth {
   display: inline-block;
}

.tns-lazy-img {
   transition: opacity .6s;
   opacity: .6;

   &.tns-complete {
      opacity: 1;
   }
}

.tns-ah {
   transition: height 0s;
}

.tns-ovh {
   overflow: hidden;
}

.tns-visually-hidden {
   position: absolute;
   left: -10000em;
}

.tns-transparent {
   opacity: 0;
   visibility: hidden;
}

.tns-fadeIn {
   opacity: 1;
   filter: alpha(opacity=100);
   z-index: 0;
}

.tns-normal, .tns-fadeOut {
   opacity: 0;
   filter: alpha(opacity=0);
   z-index: -1;
}

// *** Fix a viewport issue in initialization
.tns-vpfix {
   white-space: nowrap;

   > div, > li {
      display: inline-block;
   }
}

// *** Detecting browser capability ***
$width: 310px;
$height: 10px;
$count: 70;
$perpage: 3;
.tns-t {
   &-subp2 {
      margin: 0 auto;
      width: $width;
      position: relative;
      height: $height;
      overflow: hidden;
   }

   &-ct {
      width: calc(100% * #{$count} / #{$perpage});
      position: absolute;
      right: 0;

      &::after {
         content: "";
         display: table;
         clear: both;
      }

      > div {
         width: calc(100% / #{$count});
         height: $height;
         float: left;
      }
   }
}

.tns-controls {
   button {
      @include global.btn-reset;

      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      svg {
         width: 1em;
         height: 1em;
         fill: currentColor;

         * {
            fill: currentColor;
         }
      }
   }
}

.tns-nav {
   position: absolute;
   z-index: 1;
   width: 100%;
   display: flex;
   height: 0;

   button {
      @include global.btn-reset;
   }
}