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

@import "_autocomplete-base";
@import "_autocomplete-product-item";
@import "_autocomplete-product-cell-item";
@import "_autocomplete-all-results";

$params: (
   "border": none,
   "border-radius": 0,
   "margin-top": 30px,
   "margin-left": 0,
   "margin-right": 0,
   "max-width": 100%,
   "header-height": 200px,

   "margin-top-resp": 20px,
   "padding-right-resp": 10px,
);

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

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

.autocomplete {
   position: relative;
   z-index: -1;
   width: 100%;
   max-height: 0;
   max-width: map.get($params, "max-width");
   margin-left: map.get($params, "margin-left");
   margin-right: map.get($params, "margin-right");
   border: map.get($params, "border");
   border-radius: map.get($params, "border-radius");

   &.opened {
      // TODO max-height
      max-height: calc(100vh - #{map.get($params, "margin-top")} - #{map.get($params, "header-height")});
      margin-top: map.get($params, "margin-top");
   }
}

.autocomplete-inner {
   padding: 0;
}

@media screen and (max-width: global.$respsearch-breakpoint) {
   .autocomplete {
      margin-top: map.get($params, "margin-top-resp");
      padding-right: map.get($params, "padding-right-resp");

      &.opened {
         // TODO
         max-height: calc(100vh - 70px - 100px - #{map.get($params, "margin-top-resp")});
      }
   }

   .autocomplete-all-results-button {
      padding-block: global.$gap-width;

      .btn {
         height: 50px;
      }
   }
}
