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

$params: (
   "visisble-items": 3,
   "gap": global.$gap-width,
   "margin": 0 0 global.$spacer 0,

   "item-min-width": unset,
   "item-border-width": global.$border-width,
   "item-border-color": global.$border-color,
   "item-border-radius": global.$btn-border-radius,
   "item-padding": global.$btn-padding-y-lg global.$btn-padding-x,

   "title-color": global.$headings-color,
   "title-font-size": global.$font-size-larger,
   "title-font-weight": global.$headings-font-weight,
   
   "opener-btn-style": "btn-outline",
);

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

   $params: map.merge($params, components.$filter-top-horizontal);
}

.filter-top-horizontal {
   position: relative;
   z-index: 5;
   flex: 1;
   display: flex;
   flex-wrap: wrap;
   gap: map.get($params, "gap");
   margin: map.get($params, "margin");
   /* todo přesunout jinam (loaduje se pozdě > CLS problém) */
   min-height: calc((#{global.$btn-padding-y-lg} * 2) + (#{global.$font-size-larger} * #{global.$line-height-sm}));

   .filter-item {
      position: relative;
      flex: 1;
      min-width: map.get($params, "item-min-width");

      @if (type-of(map.get($params, "visisble-items")) == "number") {
         max-width: calc(100% / #{map.get($params, "visisble-items")} - (#{map.get($params, "visisble-items")} * map.get($params, "gap")));

         &:nth-child(n + #{map.get($params, "visisble-items") + 1}):not(.filter-item-more) {
            display: none;
         }
      }
   }

   .filter-item-opener {
      border: map.get($params, "item-border-width") solid map.get($params, "item-border-color");
      border-radius: map.get($params, "item-border-radius");
      padding: map.get($params, "item-padding");
      height: 100%;

      &.opened {
         border-bottom-color: transparent;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;

         + .filter-item-values {
            border-top-color: transparent;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
         }
      }
   }

   .filter-item-more {
      display: block;
      flex: unset;

      .filter-item-opener {
         @include global.set-btn-style(map.get($params, "opener-btn-style"));

         width: 100%;
         box-shadow: none;
      }
   }

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

   .filter-item-values {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% - map.get($params, "item-border-width"));
      padding: 10px;
      background: global.$body-bg;
      border: map.get($params, "item-border-width") solid map.get($params, "item-border-color");
      border-radius: map.get($params, "item-border-radius");
      z-index: 2;
   }

   label {
      width: 100%;
   }

   @media screen and (max-width: global.$md) {
      .filter-item {
         width: calc(50% - 10px);
         max-width: unset;
      }
   }

   @media screen and (max-width: global.$sm) {
      .filter-item {
         width: 100%;
         max-width: unset;
      }
   }
}
