@use "sass:map";
@use "sass:math";
@use "@twig/scss/_global" as global;
@use "@twig/scss/variables/_variables-components" as components;
$params: (
   "hide-breakpoint": global.$respesections-breakpoint,
   "container-type": inline-size,

   "container-size": true,
   "justify-content": flex-start,
   "flex-direction": column,
   "flex-direction-lg": row,

   "item-gap-x": global.$gap-width * 2,
   "item-padding-y": 15px,
   "item-before": "false",
   "item-before-position": absolute,

   "width": 100%,
   "background-color": global.$body-bg,
   "border-top": unset,
   "padding": 0,
   "font-size": global.$font-size-larger,
   "font-weight": global.$font-weight-bold,
   "color": global.$text-dark,
   "text-transform": none,
   "letter-spacing": normal,

   "hover-line-position": absolute,
   "hover-line-color": global.$blue,
   "hover-line-size": 3px,
   "hover-line-transform-origin": center,
   "hover-line-width": 100%,

   "home-color": global.$text-dark,
   "home-color-hover": global.$brand-ctr,
   "home-icon-size": 18px,

   "level-0-breakpoint": 500px,
);

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

   $params: map.merge($params, components.$c-header-sections);
}

.#{component("Header:Sections", "class")} {
   container-type: map.get($params, "container-type");
   background-color: map.get($params, "background-color");
   width: map.get($params, "width");
   padding: map.get($params, "padding");
   border-top: map.get($params, "border-top");

   > .container {
      @if not (map.get($params, "container-size")) {
         max-width: global.$unset-max;
      }
   }

   .level-0 {
      @include global.list-inline;

      display: flex;
      flex-direction: map.get($params, "flex-direction");
      gap: map.get($params, "item-gap-x");

      > li {
         > a {
            @include global.underline-never;

            display: flex;
            align-items: center;
            height: 100%;
            font-size: map.get($params, "font-size");
            font-weight: map.get($params, "font-weight");
            color: map.get($params, "color");
            padding-block: map.get($params, "item-padding-y");
            position: relative;
            text-transform: map.get($params, "text-transform");
            letter-spacing: map.get($params, "letter-spacing");

            &::after {
               content: "";
               display: block;
               position: map.get($params, "hover-line-position");
               border-bottom: map.get($params, "hover-line-size") solid map.get($params, "hover-line-color");
               bottom: calc(#{math.ceil(math.div(map.get($params, "hover-line-size"), 2))} * -1);
               left: 0;
               width: map.get($params, "hover-line-width");
               transform: scaleX(0);
               transform-origin: map.get($params, "hover-line-transform-origin");
               transition: transform global.$transition-speed;
            }

            @if (map.get($params, "item-before") == "true") {
               &::before {
                  content: "";
                  background: url(global.iconUrl("caret-up-bold")) no-repeat;
                  background-size: 10px;
                  display: block;
                  position: map.get($params, "item-before-position");
                  top: 46%;
                  right: -18px;
                  width: 12px;
                  height: 13px;
                  transition: transform global.$transition-speed;
               }
            }

            @include global.haf {
               &::after {
                  transform: scaleX(1);
               }
               @if (map.get($params, "item-before") == "true") {
                  &::before {
                     transform: rotate(180deg);
                     top: 35%;
                     transition: transform global.$transition-speed;
                  }
               }
            }
         }
      }
   }

   .section-item-home {
      > a {
         color: map.get($params, "home-color");
         transition: color global.$transition-speed;

         &:has(.c-icon) {
            @include global.delete-after;

            line-height: 1;
         }

         .c-icon {
            font-size: map.get($params, "home-icon-size");
            margin-top: 3px;
         }

         @include global.haf {
            color: map.get($params, "home-color-hover");
         }
      }
   }

   @container (inline-size > #{map.get($params, "level-0-breakpoint")}) {
      @include global.container-query-selector(".level-0") {
         flex-direction: map.get($params, "flex-direction-lg");
         justify-content: map.get($params, "justify-content");
      }
   }

   @media screen and (max-width: map.get($params, "hide-breakpoint")) {
      display: none;
   }
}
