@use "sass:map";
@use "@twig/scss/_global" as global;
@use "@twig/scss/variables/_variables-components" as components;

@import 'react-multi-carousel/lib/styles.css';

$jsmultisets-scrollbar-thumb-bg: #888 !default;
$jsmultisets-scrollbar-track-bg: global.$white !default;
$jsmultisets-scrollbar-height: 0px !default;
$jsmultisets-scrollbar-border-radius: 0px !default;
$jsmultisets-selection-row-item-border-radius: 10px;
$jsmultisets-selection-row-item-title-border-radius: 4px;
$jsmultisets-sidebar-padding: 20px !default;
$jsmultisets-sidebar-padding-mobile: 10px !default;

.jsmultisets {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 101;
}

.jsmultisets-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(#000, .4);
   cursor: pointer;
}

.jsmultisets-sidebar {
   position: absolute;
   bottom: 0;
   top: 0;
   right: 0;
   display: flex;
   flex-direction: column;
   gap: $jsmultisets-sidebar-padding;
   overflow: auto;
   width: 500px;
   background: global.$white;
   z-index: 101;
   animation: multisets-show .15s linear;
   padding: $jsmultisets-sidebar-padding;
}

.jsmultisets-selection-item-navigation {
   .btn-nav {
      @include global.button-variant(global.$body-color, global.$white, global.$white);
   }

   .btn {
      width: 50px;
      height: 50px;
      position: absolute;
      z-index: 3;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      border: 1px solid global.$border-color;
      border-radius: 50%;
      padding: 0;

      &.right {
         left: auto;
         right: 0;
      }
      &.align-icons {
         display: flex;
         align-items: center;
         justify-content: center;
      }
      &.disabled {
         display: none;
      }
   }
}

.jsmultisets-selection-row {
   position: relative;

   .item {
      height: 100%;
      margin-right: global.$grid-gutter-width;
      border: 1px solid global.$border-color;
      border-radius: $jsmultisets-selection-row-item-border-radius;
      margin-bottom: 3px;
      text-align: center;
      line-height: 1.5;

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

      a {
         @include global.underline-never;

         display: flex;
         flex-direction: column;
         height: 100%;
         padding: 15px;
      }

      .img-wrapper {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         flex-basis: 153px;
      }

      img {
         max-width: 100%;
         max-height: 100%;
         margin-bottom: 5px;
      }

      span {
         color: global.$text-dark;
      }

      &.item-selected {
         border-color: global.$brand-primary;
         border-width: 2px;
         z-index: 1;
         position: relative;

         a {
            padding: 14px;
         }

         &::before {
            //@include fonticon;

            //content: $icons_check;
            position: absolute;
            top: 0;
            left: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: global.$brand-primary;
            color: global.$white;
         }
      }

      .item-selected-icon {
         position: absolute;
         left: 10px;
         top: 10px;
         font-size: 18px;
         background: global.$brand-ctr;
         color: global.$white;
         padding: 5px;
         line-height: 1;
         border-radius: 5px;

         svg * {
            fill: currentColor;
         }
      }

      @include global.haf {
         border-color: global.$brand-primary;
         z-index: 1;
      }
   }
}

.jsmultisets-sidebar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;

   .title-default {
      margin-bottom: 0;
   }
}

.jsmultisets-sidebar-submit {
   position: relative;
   margin-top: auto;

   .btn {
      height: 60px;
      width: 100%;
      margin-bottom: 15px;
   }

   .btn-insert {
      @include global.button-variant(global.$white, global.$brand-ctr, global.$brand-ctr);
   }

   p {
      font-size: global.$brand-primary;
      color: global.$text-muted;
      text-align: center;
      margin-bottom: 0;

      a {
         color: global.$black;
         cursor: pointer;
      }

      span {
         &::before {
            content: "(";
         }

         &::after {
            content: ")";
         }
      }
   }
}

.jsmultisets-sidebar-inner {
   display: flex;
   flex-direction: column;
   height: calc(100% - 325px);
   flex: 1 1 auto;
   overflow: hidden;
}

.jsmultisets-product-variations-header {
   .title-default {
      font-size: global.$font-size-base;
   }
}

@media screen and (max-width: global.$sm - 1) {
   .jsmultisets-sidebar {
      width: 100%;
      position: fixed;
      padding: $jsmultisets-sidebar-padding $jsmultisets-sidebar-padding-mobile;
   }

   .jsmultisets-sidebar-inner {
      height: calc(100vh - 325px);
   }

   .jsmultisets-selection-row {
      &::-webkit-scrollbar {
         height: 0;
      }

      .item {
         min-width: 78px;

         .img-wrapper {
            flex-basis: 100%;
         }
      }
   }
}


@keyframes multisets-show {
   0% {
      transform: translateX(100%);
   }

   100% {
      transform: translateX(0);
   }
}
