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

$jsmultisets-iteration-left: 5px !default;
$jsmultisets-iteration-border-radius: 50% !default;
$jsmultisets-selected-item-title-bg: global.$brand-ctr !default;
$jsmultisets-selected-item-image-size: 77px !default;
$jsmultisets-item-border-radius: 10px;
$jsmultisets-item-title-border-radius: 4px;

.jsmultisets-selected-wrapper {
   display: block;
   margin-bottom: 1rem;

   .title {
      font-size: 18px;
      font-weight: global.$font-weight-bold;
   }
}

.jsmultisets-selected {
   display: flex;
   flex-wrap: wrap;
   align-items: center;

   .category-name {
      color: global.$text-muted;
   }

   .item-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 1rem;

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

         .item::after {
            content: "+";
            position: absolute;
            left: calc(100% + 15px);
            top: 50%;
            transform: translate(-50%, -50%);
         }
      }
   }

   .category-name {
      font-size: global.$font-size-smaller;
      margin-top: 4px;
   }

   .item {
      //@include underline-never;

      border: 1px solid global.$border-color;
      position: relative;
      padding: 10px;
      transition: all global.$transition-speed;
      border-radius: $jsmultisets-item-border-radius;

      figure {
         margin-bottom: 0;
      }

      img {
         margin: auto;
      }

      .item-iteration {
         position: absolute;
         width: 20px;
         height: 20px;
         font-size: 12px;
         background-color: global.$border-color;
         color: global.$text-dark;
         z-index: 1;
         top: -10px;
         left: $jsmultisets-iteration-left;
         border-radius: $jsmultisets-iteration-border-radius;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all global.$transition-speed;
         font-weight: global.$font-weight-bold;
      }

      //@include haf {
      //   border-color: global.$brand-primary;
      //
      //   .item-iteration {
      //      background-color: global.$brand-primary;
      //      color: global.$white;
      //   }
      //}

      &:not(.item-selected) {
         img {
            filter: grayscale(100%);
         }
      }

      &.item-selected {
         border-color: global.$brand-primary;

         .item-iteration {
            background-color: global.$brand-primary;
            color: global.$white;
         }
      }

      @media screen and (min-width: global.$xs) {
         figure {
            width: $jsmultisets-selected-item-image-size;
         }

         img {
            max-width: $jsmultisets-selected-item-image-size;
            max-height: $jsmultisets-selected-item-image-size;
         }
      }
   }

   .item-title {
      line-height: 1;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: global.$body-bg-alt;
      color: global.$black;
      padding: 12px;
      font-size: global.$font-size-smaller;
      border: 1px solid global.$border-color;
      border-radius: $jsmultisets-item-title-border-radius;
      font-weight: 600;

      &.icon {
         color: global.$white;
         padding: 6px;
         font-size: 18px;
         background-color: $jsmultisets-selected-item-title-bg;
         border-color: $jsmultisets-selected-item-title-bg;

         svg * {
            fill: currentColor;
         }
      }
   }
}

@media screen and (max-width: global.$xs - 1) {
   .jsmultisets-selected {
      justify-content: space-between;

      .item-wrapper {
         width: calc(50% - 15px);

         &:not(:last-of-type) {
            padding-right: 0;

            .item::after {
               content: "+";
               position: absolute;
               left: calc(100% + 15px);
               top: 50%;
               transform: translate(-50%, -50%);
            }
         }

         &:nth-child(even) .item {
            //@include delete-after;
         }
      }

      .item {
         img {
            width: 100%;
         }
      }
   }
}
