@import "../../components/_delivery.scss";

$jsmultisets-scrollbar-thumb-bg: #888 !default;
$jsmultisets-scrollbar-track-bg: $white !default;
$jsmultisets-scrollbar-height: 5px !default;
$jsmultisets-scrollbar-border-radius: 5px !default;

.jsmultisets-product {
   overflow: hidden auto;

   &::-webkit-scrollbar {
      width: 0;
   }
}

.jsmultisets-product-availability {
   margin-bottom: 10px;

   .delivery {
      color: $delivery-ondemand;
      font-size: $font-size-base;
      font-weight: 400;
      margin: 0;

      @if (variable-exists(font-weight-base)) {
         font-weight: $font-weight-base;
      }
   }

   @each $time, $color in $deliveries {
      .delivery-#{$time} {
         color: $color;
      }
   }
}

.jsmultisets-product-gallery {
   position: relative;
   display: flex;
   overflow: auto hidden;
   max-width: calc(100% + 60px);
   margin: 0 -30px 20px;
   scroll-snap-type: x mandatory;
   scroll-padding: 30px;

   &::-webkit-scrollbar {
      height: $jsmultisets-scrollbar-height;
   }

   &::-webkit-scrollbar-track {
      background-color: $jsmultisets-scrollbar-track-bg;
      border-radius: $jsmultisets-scrollbar-border-radius;
      margin-left: 30px;
   }

   &::-webkit-scrollbar-thumb {
      background-color: $jsmultisets-scrollbar-thumb-bg;
      border-radius: $jsmultisets-scrollbar-border-radius;
   }

   .img {
      min-width: 60%;
      width: 60%;
      margin: auto;
      scroll-snap-align: start;

      &:not(:last-of-type) {
         padding-right: 20px;
      }

      &:first-of-type:not(:last-of-type) {
         margin-left: 30px;
      }

      &:last-of-type:not(:first-of-type) {
         margin-right: 30px;
      }
   }
}

.jsmultisets-product-content {
   margin-bottom: 20px;
}

.jsmultisets-opener-wrapper {
   border-top: 1px solid $border-color;

   &:last-child {
      border-bottom: 1px solid $border-color;
   }

   .jsmultisets-opener-content {
      p:last-child {
         margin-bottom: 0;
      }
   }

   .collapse-content {
      overflow: hidden;
      transition: height .3s ease-in;
   }

   .jsmultisets-opener-title-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      cursor: pointer;
   }

   .jsmultisets-opener-icon {
      margin-left: auto;
      transition: transform .3s ease-in;

      &.flipped {
         transform: rotate(180deg);
      }
   }

   .jsmultisets-opener-title {
      margin-bottom: 0;
      padding: 20px 0;
      position: relative;
      font-weight: 600;
   }
}

.jsmultisets-params {
   ul {
      //@include list-unstyled;

      display: flex;
      flex-wrap: wrap;
   }

   li {
      margin-bottom: 1rem;
      //line-height: $line-height-sm;
      //font-size: $font-size-smaller;
      width: 100%;
   }

   strong {
      display: block;
      text-transform: uppercase;
      //letter-spacing: $letter-spacing-lg;
      color: $black;
   }

   span:not(:last-child) {
      &::after {
         content: ', ';
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .jsmultisets-product-gallery {
      max-width: calc(100% + 40px);
      margin: 0 -20px 20px;
      scroll-snap-type: x mandatory;
      scroll-padding: 20px;

      &::-webkit-scrollbar {
         height: 0;
      }

      .img {
         &:first-of-type:not(:last-of-type) {
            margin-left: 20px;
         }

         &:last-of-type:not(:first-of-type) {
            margin-right: 20px;
         }
      }
   }

   .jsmultisets-product {
      overflow: visible;
      max-height: revert;

      .title {
         font-size: 18px;
      }
   }
}

.jsmultisets-loading-spinner {
   display: inline-block;
   margin: 2rem 0;
   width: 2rem;
   height: 2rem;
   vertical-align: text-bottom;
   border: .25em solid $body-color;
   border-right-color: $body-color;
   border-right-color: transparent;
   border-radius: 50%;
   -webkit-animation: spinner-border .75s linear infinite;
   animation: spinner-border .75s linear infinite;
}

@keyframes spinner-border {
   100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}
