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

$params: (
   "box-shadow": global.$box-shadow,
   "border-top": global.$border-width solid global.$border-color,
   "border-radius": 0,
   "background": global.$white,
   "max-height": calc(95vh - 180px),
   "z-index": 20,
   "transition-max-height": 450ms ease-out,
   "transition-box-shadow": 450ms ease-out,
   "transition-z-index": 0s,

   "inner-padding-block": 40px 80px,
   "inner-padding-inline": global.$gap-width,

   "links-width": 75%,

   "level-1-grid-columns": repeat(3, 1fr),
   "level-1-grid-columns-large": repeat(4, 1fr),
   "level-1-grid-row-gap": 70px,
   "level-1-grid-column-gap": 20px,

   "image-width": 100px,
   "image-margin-right": 25px,
   "image-border-radius": global.$border-radius-base,
   "image-overlay": "true",
   "image-overlay-padding": 0,

   "section-title-font-size": 18px,
   "section-title-font-weight": global.$font-weight-bold,

   "level-2-margin-top": global.$gap-width,
   "level-2-color": global.$text-dark,
   "level-2-line-height": global.$line-height-lg,
);

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

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

.#{component("Header:Sections:SubsectionsWithImage", "class")} {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   z-index: -1;
   overflow-y: hidden;
   width: 100%;
   max-height: 0;
   background: map.get($params, "background");
   border-top: map.get($params, "border-top");
   border-radius: map.get($params, "border-radius");
   overscroll-behavior: contain;
   transition:
      max-height map.get($params, "transition-max-height"),
      box-shadow map.get($params, "transition-box-shadow"),
      z-index map.get($params, "transition-z-index");
   scrollbar-gutter: stable;

   @include global.custom-scrollbar;

   ul {
      @include global.list-unstyled;
   }

   a {
      @include global.underline-hover;
   }

   .submenu-inner {
      display: flex;
      padding-block: map.get($params, "inner-padding-block");
      padding-inline: map.get($params, "inner-padding-inline");

      &:has(> .#{component("Header:Sections:Banner", "class")}) {
         .level-1 {
            grid-template-columns: map.get($params, "level-1-grid-columns");
         }
      }
   }

   .submenu-links {
      flex: 1 1 map.get($params, "links-width");
   }

   .level-1 {
      display: grid;
      grid-template-columns: map.get($params, "level-1-grid-columns-large");
      gap: map.get($params, "level-1-grid-row-gap") map.get($params, "level-1-grid-column-gap");

      > li {
         position: relative;
         display: flex;

         .#{component("Picture", "class")} {
            flex: 0 0 map.get($params, "image-width");
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: map.get($params, "image-margin-right");
            border-radius: map.get($params, "image-border-radius");

            @if (map.get($params, "image-overlay") == "true") {
               @include global.image-overlay(map.get($params, "image-overlay-padding"));
            }
         }
      }

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

   .level-2 {
      margin-top: map.get($params, "level-2-margin-top");
      color: map.get($params, "level-2-color");
      line-height: map.get($params, "level-2-line-height");

      > li {
         display: block;
      }
   }

   .nav-link-all {
      @include global.underline-default;
   }
}

.#{component("Header:Sections", "class")} .level-0 > .is-hover {
   .#{component("Header:Sections:SubsectionsWithImage", "class")} {
      z-index: map.get($params, "z-index");
      overflow-y: auto;
      max-height: map.get($params, "max-height");
      box-shadow: map.get($params, "box-shadow");
      transition:
         max-height map.get($params, "transition-max-height"),
         box-shadow map.get($params, "transition-box-shadow");
   }
}
