@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,

   "modal-width": auto,
   "modal-background-color": global.$body-bg,

   "show-submenu-title": true,
   "header-sections-justify-content": flex-start,
   "secions-width": 315px,
   "sections-border-radius": 0,

   "item-padding-y": 5px 40px 5px 20px,
   "item-height": 54px,
   "font-size": global.$font-size-base,
   "font-weight": global.$font-weight-bold,
   "color": global.$text-dark,
   "icon-right": 20px,
   "icon-font-size": inherit,

   "header-height": 65px,
   "header-padding": 0 20px,
   "header-btn-padding": 5px 0,
   "header-btn-font-size": inherit,

   "close-width": auto,
   "close-height": auto,
   "close-padding": global.$btn-padding-y global.$btn-padding-x,
   "close-color": currentColor,
   "close-color-hover": global.$state-error,
   "close-background": global.$body-bg-alt,
   "close-border": global.$btn-border-width solid transparent,
   "close-border-radius": global.$btn-border-radius,
   "close-font-size": inherit,

   "overlay-background": global.$black,
   "overlay-opacity": .5,

   "image-overlay": true,
   "image-margin-right": 15px,
   "image-max-width": 44px,
   "image-padding": 5px,
   "image-border-radius": unset,

   "submenu-background": global.$body-bg-alt,
   "submenu-font-size": global.$font-size-base,
   "submenu-font-weight": global.$font-weight-base,
   "submenu-color": global.$text-dark,
   "submenu-title-font-size": global.$font-size-base,
   "submenu-title-font-weight": global.$font-weight-base,
   "submenu-title-color": global.$text-muted,
   "submenu-title-margin-bottom": 26px,
   "submenu-item-padding": 10px 0,
   "submenu-padding": 22px 30px,
   "submenu-width": 280px,
   "submenu-border-radius": 0,
   "submenu-box-shadow": global.$box-shadow,

   "is-menu-fixed": "true",
   "item-background-haf": global.$body-bg-alt,
   "item-color-haf": global.$text-dark,

   "btn-background-color-active": global.$brand-secondary,
   "btn-color-active": global.$white,

   "footer-padding": unset,
   "footer-sticky": "false",
   "footer-sticky-height": 0px,
);

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

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

.#{component("Header:SectionsModal", "class")} {
   position: relative;
   width: map.get($params, "modal-width");

   .btn-toggle {
      padding: map.get($params, "header-btn-padding");
      font-size: map.get($params, "header-btn-font-size");

      &.active {
         background-color: map.get($params, "btn-background-color-active");
         border-color: map.get($params, "btn-background-color-active");
         color: map.get($params, "btn-color-active");
      }
   }

   .sections {
      background-color: map.get($params, "modal-background-color");
      container-type: inline-size;
      width: map.get($params, "secions-width");
      position: fixed;
      left: -100%;
      top: 0;
      bottom: 0;
      display: block;
      transition: left global.$transition-speed;
      border-radius: map.get($params, "sections-border-radius");

      &.is-open {
         visibility: visible;
         z-index: 100;
         left: 0;
      }

      @if (map.get($params, "is-menu-fixed") == "false") {
         display: none;
         position: absolute;
         top: unset;
         right: unset;
         bottom: unset;
         box-shadow: global.$box-shadow;

         &.is-open {
            display: block;
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;

            .sections-top-level {
               border-bottom-right-radius: 0;
               border-top-right-radius: 0;
            }
         }
      }
   }

   .sections-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: map.get($params, "header-height");
      padding: map.get($params, "header-padding");

      @if (map.get($params, "is-menu-fixed") == "false") {
         display: none;
      }

      .close {
         width: map.get($params, "close-width");
         height: map.get($params, "close-height");
         padding: map.get($params, "close-padding");
         color: map.get($params, "close-color");
         background: map.get($params, "close-background");
         border: map.get($params, "close-border");
         border-radius: map.get($params, "close-border-radius");
         font-size: map.get($params, "close-font-size");

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

   .sections-wrapper {
      overflow: hidden auto;
      direction: rtl;
      border-radius: map.get($params, "sections-border-radius");

      @if (map.get($params, "footer-sticky") == "true") {
         max-height: calc(100% - map.get($params, "header-height") - map.get($params, "footer-sticky-height"));
      } @else {
         max-height: calc(100% - map.get($params, "header-height"));
      }

      @include global.custom-scrollbar;
   }

   .sections-inner {
      ul {
         @include global.list-inline;

         display: flex;
         flex-direction: column;
         padding-right: 0;
      }

      li {
         .#{component("Picture", "class")} {
            @if (map.get($params, "image-overlay") == true) {
               @include global.image-overlay;
            }

            margin-right: map.get($params, "image-margin-right");
            max-width: map.get($params, "image-max-width");
            padding: map.get($params, "image-padding");
            border-radius: map.get($params, "image-border-radius");
         }

         @include global.haf {
            > .submenu {
               display: block;
            }
         }
      }
   }

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

         display: flex;
         align-items: center;
         min-height: map.get($params, "item-height");
         font-size: map.get($params, "font-size");
         font-weight: map.get($params, "font-weight");
         color: map.get($params, "color");
         position: relative;
         padding: map.get($params, "item-padding-y");
         background-color: map.get($params, "modal-background-color");
         direction: ltr;

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

         .c-icon {
            position: absolute;
            right: map.get($params, "icon-right");
            top: 50%;
            transform: translateY(-50%);
            font-size: map.get($params, "icon-font-size");
         }
      }
   }

   .sections-footer {
      padding: map.get($params, "footer-padding");

      @if (map.get($params, "footer-sticky") == "true") {
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: map.get($params, "footer-sticky-height");
      }
   }

   .submenu {
      position: absolute;
      left: 100%;
      top: 0;
      bottom: 0;
      min-width: map.get($params, "submenu-width");
      display: none;
      background: map.get($params, "submenu-background");
      padding: map.get($params, "submenu-padding");
      border-radius: map.get($params, "submenu-border-radius");
      box-shadow: map.get($params, "submenu-box-shadow");
      text-align: left;

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

         @if (map.get($params, "show-submenu-title") == false) {
            display: none;
         }
      }

      ul {
         overflow: hidden auto;
         max-height: calc(100% - 36px - map.get($params, "submenu-title-font-size") * #{global.$line-height-base});
         direction: ltr;

         @include global.custom-scrollbar;
      }

      a {
         @include global.underline-hover;

         display: block;
         padding: map.get($params, "submenu-item-padding");
         font-size: map.get($params, "submenu-font-size");
         font-weight: map.get($params, "submenu-font-weight");
         color: map.get($params, "submenu-color");
      }
   }

   .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: map.get($params, "overlay-opacity");
      background-color: map.get($params, "overlay-background");
      z-index: 99;
      display: none;

      &.is-open {
         display: block;
      }

      @if (map.get($params, "is-menu-fixed") == "false") {
         position: unset;
      }
   }

   @container (inline-size > 500px) {
      @include global.container-query-selector(".sections-inner ul") {
         flex-direction: row;
         align-items: center;
         justify-content: map.get($params, "header-sections-justify-content");
      }
   }

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