@salla.sa/twilight-components 2.14.537 → 2.14.539

package/dist/collection/components/salla-slider/salla-slider.css

@@ -1,4 +1,4 @@
-/**
+/*!twlt*//**
  * Swiper 12.1.3
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
@@ -871,4 +871,751 @@
 
 .s-slider-vertical .s-slider-container {
   min-width: 0;
-}
+}
+.visible{
+  visibility: visible;
+}
+.block{
+  display: block;
+}
+.grid{
+  display: grid;
+}
+.filter{
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.transition{
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.toggle-checkbox .s-toggle-switcher{
+  display: inline-block;
+  background: #ccc;
+  border-radius: 16px;
+  width: 40px;
+  height: 25px;
+  position: relative;
+  vertical-align: middle;
+  transition: background 0.25s;
+}
+.toggle-checkbox .s-toggle-switcher:before,.toggle-checkbox .s-toggle-switcher:after{
+  content: "";
+}
+.toggle-checkbox .s-toggle-switcher:before{
+  display: block;
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
+  width: 20px;
+  height: 21px;
+  position: absolute;
+  top: 2.2px;
+  left: 1px;
+  transition: left 0.25s;
+}
+.s-loyalty-program-rewards-container-cart .s-slider-block__title-nav{
+  width: 100%;
+}
+@media (min-width: 768px){
+  .s-loyalty-program-slider-arrows .s-slider-v-centered .s-slider-block__title-nav{
+    display: none;
+  }
+}
+.s-loyalty-program-slider-arrows-edges .s-slider-v-centered .s-slider-block__title-nav{
+  width: 100%;
+}
+@media (min-width: 768px){
+  .s-loyalty-program-slider-arrows-edges .s-slider-v-centered .s-slider-block__title-nav{
+    display: none;
+  }
+}
+.s-loyalty-program-slider-arrows .s-slider-v-centered .swiper-button-disabled{
+  visibility: hidden;
+}
+.s-loyalty-program-slider-arrows-edges .s-slider-v-centered .swiper-button-disabled{
+  visibility: hidden;
+}
+.s-multiple-bundle-product-options-modal-slider .s-slider-container .swiper-slide{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.s-multiple-bundle-product-options-modal-slider .s-slider-thumbs{
+  margin-top: 0px !important;
+}
+.s-multiple-bundle-product-options-modal-slider .s-slider-thumbs-container{
+  position: static;
+  margin: 0px !important;
+  width: 40px !important;
+  transform: none !important;
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
+}
+.s-multiple-bundle-product-options-modal-slider .s-slider-thumbs-container .swiper-slide{
+  margin-top: 0px !important;
+  display: flex !important;
+  height: 40px !important;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+}
+.s-offer-.s-slider-block__title{
+  position: relative;
+  margin-bottom: 1.25rem;
+}
+.s-offer-.s-slider-block__title::before{
+  position: absolute;
+  top: 1rem;
+  font-size: 3rem;
+  font-weight: 400;
+  line-height: 1;
+  --tw-text-opacity: 1;
+  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
+  --tw-content: 'ee30';
+  content: var(--tw-content);
+}
+.s-offer-.s-slider-block__title:where([dir="ltr"], [dir="ltr"] *)::before{
+  content: var(--tw-content);
+  left: 0px;
+}
+.s-offer-.s-slider-block__title:where([dir="rtl"], [dir="rtl"] *)::before{
+  content: var(--tw-content);
+  right: 0px;
+}
+.s-offer-.s-offer-wrapper .s-slider-block__title h2{
+  z-index: 0;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+.s-offer-.s-offer-wrapper .s-slider-block__title p{
+  margin-top: 0.25rem;
+  overflow: visible;
+  display: block;
+  -webkit-box-orient: horizontal;
+  -webkit-line-clamp: none;
+  line-height: 1.5rem;
+}
+.s-offer-wrapper .s-slider-block__title::before{
+  content: \ee30;
+  font-family: sallaicons;
+  position: absolute;
+  top: 1rem;
+  font-size: 3rem;
+  font-weight: 400;
+  line-height: 1;
+  z-index: -1;
+  color: rgba(254, 242, 242, 1);
+}
+.s-reviews-container .s-slider--nav-arrow.s-slider-next{
+  left: 17%;
+}
+.s-reviews-container .s-slider--nav-arrow.s-slider-next:where([dir="ltr"], [dir="ltr"] *){
+  left: auto;
+}
+.s-reviews-container .s-slider--nav-arrow.s-slider-next:where([dir="rtl"], [dir="rtl"] *){
+  right: auto;
+}
+.s-slider-wrapper .swiper-pagination-bullet{
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+}
+.s-slider-wrapper .swiper-pagination-bullet-active{
+  background-color: var(--color-primary);
+}
+.s-slider-swiper-wrapper > div{
+  align-items: stretch;
+}
+.s-slider-container{
+  display: block;
+}
+.s-slider-horizontal .s-slider-thumbs{
+  margin-top: 1rem;
+}
+.s-slider-thumbs-container{
+  position: relative;
+  margin-left: -5px;
+  margin-right: -5px;
+}
+@media (min-width: 640px){
+  .s-slider-thumbs-container{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}
+.s-slider-thumbs-container:where([dir="ltr"], [dir="ltr"] *){
+  padding-right: 3rem;
+}
+@media (min-width: 1024px){
+  .s-slider-thumbs-container:where([dir="ltr"], [dir="ltr"] *){
+    padding-right: 0px;
+  }
+}
+.s-slider-thumbs-container:where([dir="rtl"], [dir="rtl"] *){
+  padding-left: 3rem;
+}
+@media (min-width: 1024px){
+  .s-slider-thumbs-container:where([dir="rtl"], [dir="rtl"] *){
+    padding-left: 0px;
+  }
+}
+.s-slider-wrapper{
+  position: relative;
+}
+.s-slider-block__title{
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+  display: flex;
+  max-width: 1280px;
+  align-items: center;
+  justify-content: space-between;
+}
+@media (min-width: 768px){
+  .s-slider-block__title{
+    margin-bottom: 2rem;
+  }
+}
+.s-slider-block__title-right:where([dir="ltr"], [dir="ltr"] *){
+  padding-right: 2rem;
+}
+.s-slider-block__title-right:where([dir="rtl"], [dir="rtl"] *){
+  padding-left: 2rem;
+}
+.s-slider-block__title-left{
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.s-slider-block__title-left > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.s-slider-block__title-left:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 1;
+}
+.s-slider-block__title h2{
+  position: relative;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+.s-slider-block__title h2:where([dir="ltr"], [dir="ltr"] *){
+  padding-right: 2rem;
+}
+.s-slider-block__title h2:where([dir="rtl"], [dir="rtl"] *){
+  padding-left: 2rem;
+}
+.s-slider-block__title p{
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  opacity: 0.6;
+}
+@media (min-width: 768px){
+  .s-slider-block__title p:where([dir="ltr"], [dir="ltr"] *){
+    padding-right: 4rem;
+  }
+  .s-slider-block__title p:where([dir="rtl"], [dir="rtl"] *){
+    padding-left: 4rem;
+  }
+}
+.s-slider-block__title-nav{
+  display: flex;
+}
+.s-slider-block__title-nav > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.625rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.625rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.s-slider-block__title-nav:where([dir="ltr"], [dir="ltr"] *){
+  margin-left: 1.5rem;
+  flex-direction: row-reverse;
+}
+.s-slider-block__title-nav:where([dir="rtl"], [dir="rtl"] *){
+  margin-right: 1.5rem;
+}
+.s-slider-block__title-nav:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 1;
+}
+salla-slider[direction='ltr'] .s-slider-block__title-nav{
+  flex-direction: row-reverse;
+}
+.carousel-slider .s-slider-block__title-nav{
+  display: none;
+}
+@media (min-width: 1024px){
+  .carousel-slider .s-slider-block__title-nav{
+    display: flex;
+  }
+}
+.s-slider-v-centered .s-slider-block__title-nav{
+  pointer-events: none;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 2;
+  margin-left: 0px;
+  margin-right: 0px;
+  width: 94%;
+  --tw-translate-x: -50%;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  justify-content: space-between;
+}
+.s-slider-v-centered .s-slider-block__title-nav button{
+  pointer-events: auto;
+  border-style: none;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow-color: #d1d5db;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+.s-slider-v-centered .s-slider-block__title-nav button:hover{
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.s-slider-v-centered .s-slider-block__title-nav button.swiper-button-disabled{
+  opacity: 1;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.s-slider-v-centered .s-slider-block__title-nav button.swiper-button-disabled svg{
+  fill: #d1d5db;
+}
+.s-slider-v-centered.fullwidth-slider .s-slider-block__title-nav button{
+  --tw-shadow-color: #374151;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+.s-slider-controls-outer .s-slider-block__title-nav{
+  width: 97%;
+}
+@media (min-width: 1536px){
+  .s-slider-controls-outer .s-slider-block__title-nav{
+    width: calc(100% + 32px);
+  }
+}
+.s-slider-block__display-all{
+  display: inline-block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+.s-slider-block__display-all:hover{
+  opacity: 0.8;
+}
+.s-slider-nav-arrow{
+  display: inline-flex;
+  height: 2.5rem;
+  width: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+.s-slider-nav-arrow svg{
+  width: 22px;
+  fill: #6b7280;
+}
+.s-slider-thumbs-nav{
+  pointer-events: none;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 2;
+  margin-left: 0px;
+  margin-right: 0px;
+  display: flex;
+  width: 94%;
+  --tw-translate-x: -50%;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  justify-content: space-between;
+}
+.s-slider-thumbs-nav > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.625rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.625rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.s-slider-thumbs-nav:where([dir="ltr"], [dir="ltr"] *){
+  flex-direction: row-reverse;
+}
+.s-slider-thumbs-nav:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 1;
+}
+.s-slider-thumbs-nav button{
+  pointer-events: auto;
+  border-style: none;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+.s-slider-thumbs-nav button:hover{
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.s-slider-thumbs-nav button.swiper-button-disabled{
+  opacity: 1;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.s-slider-thumbs-nav button.swiper-button-disabled svg{
+  fill: #d1d5db;
+}
+.s-slider-nav-arrow:not(:disabled):hover{
+  border-color: var(--color-primary);
+}
+.s-slider-nav-arrow:not(:disabled):hover svg{
+  fill: var(--color-primary);
+}
+salla-slider:not(.hydrated), .carousel-slider{
+  visibility: visible;
+}
+salla-slider[type]:not(.hydrated) > div, salla-slider[type]:not(.hydrated) .swiper > div > div, .carousel-slider .swiper{
+  margin-left: -0.625rem;
+  margin-right: -0.625rem;
+  display: flex;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+@media (min-width: 640px){
+  salla-slider[type]:not(.hydrated) > div, salla-slider[type]:not(.hydrated) .swiper > div > div, .carousel-slider .swiper{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}
+salla-slider[type]:not(.hydrated) > div:where([dir="ltr"], [dir="ltr"] *), salla-slider[type]:not(.hydrated) .swiper > div > div:where([dir="ltr"], [dir="ltr"] *), .carousel-slider .swiper:where([dir="ltr"], [dir="ltr"] *){
+  padding-right: 3rem;
+}
+@media (min-width: 1024px){
+  salla-slider[type]:not(.hydrated) > div:where([dir="ltr"], [dir="ltr"] *), salla-slider[type]:not(.hydrated) .swiper > div > div:where([dir="ltr"], [dir="ltr"] *), .carousel-slider .swiper:where([dir="ltr"], [dir="ltr"] *){
+    padding-right: 0px;
+  }
+}
+salla-slider[type]:not(.hydrated) > div:where([dir="rtl"], [dir="rtl"] *), salla-slider[type]:not(.hydrated) .swiper > div > div:where([dir="rtl"], [dir="rtl"] *), .carousel-slider .swiper:where([dir="rtl"], [dir="rtl"] *){
+  padding-left: 3rem;
+}
+@media (min-width: 1024px){
+  salla-slider[type]:not(.hydrated) > div:where([dir="rtl"], [dir="rtl"] *), salla-slider[type]:not(.hydrated) .swiper > div > div:where([dir="rtl"], [dir="rtl"] *), .carousel-slider .swiper:where([dir="rtl"], [dir="rtl"] *){
+    padding-left: 0px;
+  }
+}
+salla-slider[type]:not(.hydrated) > div > div, salla-slider[type]:not(.hydrated) .swiper > div > div > div, .carousel-slider .swiper-wrapper > div{
+  flex-shrink: 0;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+@media (min-width: 640px){
+  salla-slider[type]:not(.hydrated) > div > div, salla-slider[type]:not(.hydrated) .swiper > div > div > div, .carousel-slider .swiper-wrapper > div{
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+  }
+}
+salla-slider:not([type='carousel']):not([type='thumbs']):not(.hydrated) > div, salla-slider.photos-slider:not(.hydrated) > div{
+  margin-left: 0px;
+  margin-right: 0px;
+  width: 100%;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+salla-slider:not([type='carousel']):not([type='thumbs']):not(.hydrated) > div > div, salla-slider.photos-slider:not(.hydrated) > div > div{
+  padding: 0px;
+}
+salla-slider:not([type='carousel']):not([type='thumbs']):not(.hydrated) > div > div:nth-child(n+2){
+  display: none;
+}
+salla-slider[type='fullscreen'] [slot='items'] > div{
+  min-height: calc(100vh - 100px);
+  width: 100%;
+}
+salla-slider:not(.hydrated){
+  display: block;
+  overflow: hidden;
+}
+.s-slider-has-notitle .s-slider-block__title{
+  margin-bottom: 0px;
+}
+salla-slider div[slot='thumbs']{
+  margin-top: 0.625rem;
+}
+salla-slider{
+  display: block;
+}
+salla-slider div[slot='thumbs'] > div{
+  height: 5rem;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.s-slider-vertical{
+  height: 100%;
+}
+@media (min-width: 768px){
+  .s-slider-vertical{
+    display: flex;
+  }
+}
+.s-slider-vertical .s-slider-container{
+  margin-left: 0px;
+  margin-right: 0px;
+}
+.s-slider-vertical .s-slider-thumbs{
+  margin-left: -0.625rem;
+  margin-right: -0.625rem;
+  margin-top: 0.625rem;
+  width: 100%;
+}
+@media (min-width: 768px){
+  .s-slider-vertical .s-slider-thumbs{
+    margin-top: 0px;
+    margin-bottom: 0px;
+    margin-left: 15px;
+    height: 100%;
+    width: 8rem;
+    padding: 0px;
+  }
+  .s-slider-vertical .s-slider-thumbs:where([dir="rtl"], [dir="rtl"] *){
+    margin-left: 0px;
+    margin-right: 15px;
+  }
+}
+.s-slider-vertical .s-slider-thumbs-container{
+  margin-left: -0.625rem;
+  margin-right: -0.625rem;
+  margin-top: 0.625rem;
+  max-height: 360px;
+  width: 100vw;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+@media (min-width: 768px){
+  .s-slider-vertical .s-slider-thumbs-container{
+    top: 50%;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
+    min-height: 100%;
+    width: 8rem;
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    padding: 0px;
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+}
+.s-slider-vertical .s-slider-thumbs-prev{
+  position: absolute;
+  top: 1%;
+  left: 50%;
+  z-index: 1;
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+  display: none;
+  --tw-translate-x: -50%;
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+@media (min-width: 768px){
+  .s-slider-vertical .s-slider-thumbs-prev{
+    display: flex;
+  }
+}
+.s-slider-vertical .s-slider-thumbs-prev:where([dir="rtl"], [dir="rtl"] *){
+  --tw-rotate: -90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.s-slider-vertical .s-slider-thumbs-next{
+  position: absolute;
+  bottom: 1%;
+  left: 50%;
+  z-index: 1;
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+  display: none;
+  --tw-translate-x: -50%;
+  --tw-rotate: 90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+@media (min-width: 768px){
+  .s-slider-vertical .s-slider-thumbs-next{
+    display: flex;
+  }
+}
+.s-slider-vertical .s-slider-thumbs-next:where([dir="rtl"], [dir="rtl"] *){
+  --tw-rotate: -90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.s-slider-vertical .s-slider-thumbs-nav{
+  height: 100%;
+}
+.s-slider-thumbs .s-slider-thumbs-container .swiper-slide{
+  margin-left: 5px;
+  margin-right: 5px;
+  height: 4rem;
+  width: 25%;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: var(--s-radius, 0.25rem);
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  padding: 0px;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+.s-slider-thumbs .s-slider-thumbs-container .swiper-slide:hover{
+  opacity: 0.8;
+}
+@media (min-width: 640px){
+  .s-slider-thumbs .s-slider-thumbs-container .swiper-slide{
+    width: 20%;
+  }
+}
+@media (min-width: 768px){
+  .s-slider-thumbs .s-slider-thumbs-container .swiper-slide{
+    height: 5rem;
+    width: 25%;
+  }
+}
+@media (min-width: 1024px){
+  .s-slider-thumbs .s-slider-thumbs-container .swiper-slide{
+    width: 20%;
+  }
+}
+.s-slider-vertical .s-slider-thumbs-container .swiper-slide{
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  height: 4rem;
+  cursor: pointer;
+  padding: 0px;
+}
+@media (min-width: 768px){
+  .s-slider-vertical .s-slider-thumbs-container .swiper-slide{
+    height: 5rem;
+    width: 100%;
+  }
+}
+.s-slider-thumbs .s-slider-thumbs-container .swiper-slide:after{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
+  height: 100%;
+  width: 100%;
+  border-radius: var(--s-radius, 0.25rem);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1));
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  --tw-content: '';
+  content: var(--tw-content);
+}
+@media (min-width: 768px){
+  thumbs .s-slider-thumbs-container{
+    direction: ltr;
+  }
+  .s-slider-thumbs .s-slider-thumbs-container.has-more-4-slides{
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+}
+.s-slider-thumbs .s-slider-thumbs-container.has-more-4-slides:where([dir="ltr"], [dir="ltr"] *){
+  padding-right: 2.5rem;
+}
+.s-slider-thumbs .s-slider-thumbs-container.has-more-4-slides:where([dir="rtl"], [dir="rtl"] *){
+  padding-left: 2.5rem;
+}
+salla-slider .video-entry, salla-slider .model-entry{
+  position: relative;
+}
+salla-slider .video-entry:before, salla-slider .model-entry:before{
+  pointer-events: none;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 1;
+  display: flex;
+  height: 4rem;
+  width: 4rem;
+  --tw-translate-x: -50%;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: rgb(0 0 0 / 0.3);
+  font-size: 3rem;
+  line-height: 1;
+  color: rgb(255 255 255 / 0.8);
+  --tw-content: '\ee61';
+  content: var(--tw-content);
+}
+.video-entry:before, .model-entry:before{
+  font-family: sallaicons;
+}
+salla-slider .model-entry .s-toggle-switcher{
+  pointer-events: auto;
+}
+salla-slider .model-entry:before{
+  --tw-content: '\e9a0';
+  content: var(--tw-content);
+}
+.s-slider-thumbs .swiper-slide.video-entry:before, .s-slider-thumbs .swiper-slide.model-entry:before{
+  height: 1.75rem;
+  width: 1.75rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+.s-slider-thumbs .s-slider-thumbs-container .swiper-slide.swiper-slide-thumb-active:after{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-color: var(--color-primary);
+}
+.s-slider-with-grid-thumbs .s-slider-thumbs .s-slider-thumbs-container .swiper-slide{
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+  object-fit: cover;
+}
+.s-slider-with-grid-thumbs .s-slider-thumbs .s-slider-thumbs-container{
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+.s-slider-with-grid-thumbs .s-slider-thumbs-nav{
+  display: none;
+}
+.s-slider-grid-thumbs{
+  display: grid;
+  transform: none !important;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1.5rem;
+}