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

$params: (
   "background": global.$body-bg,
   "box-shadow": global.$box-shadow,
   "border-radius": global.$border-radius-lg,

   "inner-gap": 40px,
   "inner-padding": 20px,
   "inner-title-margin-bottom": 10px,
   "inner-title-font-size": global.$font-size-h4,
   "inner-title-font-weight": global.$headings-font-weight,
   "inner-title-color": global.$gray-dark,

   "main-width": 60%,

   "products-width": 100%,
   "products-gap": global.$gap-width,
   "side-width": 40%,
   "side-padding": 0,
   "side-border-radius": 0,
   "side-background": transparent,

   "main-results-margin-bottom": 0,
   "main-results-max-width": 100%,
   "main-results-columns": 1,
   "main-results-underline": 'hover',
   "main-results-font-size": global.$font-size-base,
   "main-results-font-weight": global.$font-weight-base,
   "main-results-color": global.$body-color,

   "results-margin-top": 20px,
   "results-padding-top": 20px,
   "results-border-top": global.$border-width solid global.$border-color,
   "results-font-size": global.$font-size-base,
   "results-font-weight": global.$font-weight-base,
   "results-color": global.$body-color,
   "results-image-max-width": 100%,
   "results-image-margin-bottom": 5px,
   "results-image-border-radius": global.$border-radius-base,
   "results-item-margin-bottom": 5px,
);

@if global-variable-exists(autocomplete-base, components) {
   $keys: map.keys(components.$autocomplete-base);
   @each $name in $keys {
      @if not map.get($params, $name) {
         @warn "Neexistující proměnná '#{$name}' v komponentě 'autocomplete-base'.";
      }
   }

   $params: map.merge($params, components.$autocomplete-base);
}

// autocomplete overlay
.autocomplete-active {
   &::after {
      content: "";
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 9;
      display: block;
      background: global.$overlay-bg;
   }

   .#{component("Product:StickyLine", "class")} {
      z-index: 9;
   }
}

.autocomplete {
   background: map.get($params, "background");
   opacity: 0;
   overflow: hidden;
   scrollbar-color: global.$border-color global.$body-bg-alt;
   scrollbar-width: thin;
   scrollbar-gutter: stable;
   overscroll-behavior: contain;

   @include global.custom-scrollbar;

   &.opened {
      height: auto;
      opacity: 1;
      overflow-y: auto;
      z-index: 200;
   }

   .loader {
      display: flex;
      align-items: center;
      justify-content: center;
      background: map.get($params, "background");
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;

      &:first-child {
         position: relative;
      }

      .loader-icon {
         display: block;
         border: 3px solid global.$brand-primary;
         border-radius: 50%;
         border-right-color: transparent;
         width: 25px;
         height: 25px;
         margin: 0 auto;
         animation: loader 1.25s infinite linear;
      }
   }

   .empty-results {
      margin: 0;
   }
}

.autocomplete-inner {
   display: flex;
   gap: map.get($params, "inner-gap");
   padding: map.get($params, "inner-padding");

   .title-default {
      margin-bottom: map.get($params, "inner-title-margin-bottom");
      color: map.get($params, "inner-title-color");
      font-size: map.get($params, "inner-title-font-size");
      font-weight: map.get($params, "inner-title-font-weight");
   }

   ul {
      @include global.list-unstyled;
   }
}

.autocomplete-main {
   width: map.get($params, "main-width");

   .autocomplete-results {
      margin-bottom: map.get($params, "main-results-margin-bottom");
      max-width: map.get($params, "main-results-max-width");

      ul {
         columns: map.get($params, "main-results-columns");
      }

      a {
         font-size: map.get($params, "main-results-font-size");
         font-weight: map.get($params, "main-results-font-weight");
         color: map.get($params, "main-results-color");

         @if (map.get($params, "main-results-underline") == 'hover') {
            @include global.underline-hover;
         } @else if (map.get($params, "main-results-underline") == 'default') {
            @include global.underline-default;
         } @else {
            @include global.underline-never;
         }
      }
   }
}

.autocomplete-products {
   width: map.get($params, "products-width");

   .autocomplete-cell-products {
      container-type: inline-size;
      display: flex;
      flex-wrap: wrap;
      gap: map.get($params, "products-gap");
   }
}

.autocomplete-side {
   width: map.get($params, "side-width");
   padding: map.get($params, "side-padding");
   background: map.get($params, "side-background");
   border-radius: map.get($params, "side-border-radius");
}

.autocomplete-results {
   a {
      font-size: map.get($params, "results-font-size");
      font-weight: map.get($params, "results-font-weight");
      color: map.get($params, "results-color");
   }

   .img {
      max-width: map.get($params, "results-image-max-width");
      margin-bottom: map.get($params, "results-image-margin-bottom");

      img {
         border-radius: map.get($params, "results-image-border-radius");
      }
   }


   + .autocomplete-results {
      margin-top: map.get($params, "results-margin-top");
      padding-top: map.get($params, "results-padding-top");
      border-top: map.get($params, "results-border-top");
   }
}

.autocomplete-item {
   margin-bottom: map.get($params, "results-item-margin-bottom");

   a {
      @include global.underline-hover;
   }
}

@media screen and (max-width: global.$respsearch-breakpoint) {
   .autocomplete-active {
      &,
      > body {
         overflow: hidden;
         position: relative;
         height: 100%;
         min-height: 100%;
         display: block;
      }

      &::after {
         background: map.get($params, "background");
      }
   }

   .autocomplete-inner {
      padding: 20px 0 80px;
      flex-direction: column;
      gap: 20px;
   }

   .autocomplete-main,
   .autocomplete-products,
   .autocomplete-side {
      padding: 0;
      width: 100%;
      background: global.$body-bg;
   }

   .autocomplete-main {
      .autocomplete-results {
         ul {
            columns: 1;
         }
      }
   }

   .autocomplete-products,
   .autocomplete-results {
      + .autocomplete-products,
      + .autocomplete-results,
      + .autocomplete-side {
         margin-top: map.get($params, "results-margin-top");
         padding-top: map.get($params, "results-padding-top");
         border-top: map.get($params, "results-border-top");
      }
   }
}

@keyframes loader {
   0% {
      transform: rotate(0);
   }

   100% {
      transform: rotate(360deg);
   }
}
