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

$params: (
   "margin-bottom": global.$gap-width,

   "item-background": global.$body-bg-alt,
   "item-border-radius": global.$border-radius-base,
   "item-gap": global.$gap-width,
   "item-min-height": 75px,
   "item-padding": 35px 20px,
   "image-overlay": true, //background
   "image-width-sm": 80px,
   "item-left-side-width": 20%,
   "item-right-side-width": 80%,

   "list-padding-left": 20px,
   "list-margin-bottom": 0,
   "list-item-padding": 4px 10px 4px 20px,
   "list-item-icon-left": 0,
   "list-item-icon-font-size": 12px,
   "list-item-icon-color": global.$blue,

   "rwd-title-margin-left": 20px,
   "rwd-title-padding-right": 48px,

   "toggle-button-right": 24px,
   "toggle-button-size": 24px,
   "toggle-button-font-size": 18px,
   "toggle-button-margin-left": auto,

   "title-color": global.$black,
   "title-letter-spacing": 0,
   "title-line-height": global.$line-height-base,
   "title-font-size": global.$font-size-h3,
   "title-font-size-sm": global.$font-size-h5,
   "title-padding": 0 20px,

   "border": global.$border-width solid transparent,
   "border-color-active": global.$brand-primary,
);

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

   $params: map.merge($params, components.$c-sectionlist-section);
}

.#{component("SectionList:Section", "class")} {
   width: 100%;
   margin-bottom: map.get($params, "margin-bottom");
   container-type: inline-size;

   a {
      text-decoration: none;
   }

   .section-item {
      background: map.get($params, "item-background");
      min-height: map.get($params, "item-min-height");
      border-radius: map.get($params, "item-border-radius");
      border: map.get($params, "border");
      transition: border-color global.$transition-speed;


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

         mix-blend-mode: darken;
         max-width: map.get($params, "image-width-sm");
         width: map.get($params, "image-width-sm");
      }
   }

   .section-item-inner {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      text-decoration: none;
   }

   .section-item-title {
      color: map.get($params, "title-color");
      letter-spacing: map.get($params, "title-letter-spacing");
      line-height: map.get($params, "title-line-height");
      font-size: map.get($params, "title-font-size-sm");
   }

   .left,
   .right {
      width: 100%;
   }

   .left {
      display: flex;
      align-items: center;
   }

   ul {
      list-style-type: none;
      padding-left: map.get($params, "list-padding-left");
      margin-bottom: map.get($params, "list-margin-bottom");
   }

   li {
      padding: map.get($params, "list-item-padding");
      position: relative;

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

   .title-rwd {
      display: flex;
      align-items: center;
      flex: 1;
      margin-left: map.get($params, "rwd-title-margin-left");
      padding-right: map.get($params, "rwd-title-padding-right");

      p {
         margin-bottom: 0;
      }

      button {
         @include global.btn-reset;

         display: flex;
         align-items: center;
         justify-content: center;
         position: absolute;
         right: map.get($params, "toggle-button-right");
         width: map.get($params, "toggle-button-size");
         height: map.get($params, "toggle-button-size");
         font-size: map.get($params, "toggle-button-font-size");
         line-height: 1;
         margin-left: map.get($params, "toggle-button-margin-left");
         transition: transform global.$transition-speed;

         &:not(.active) {
            transform: rotate(180deg);
         }
      }
   }

   @container (inline-size > 499px) {
      @include global.container-query-selector("ul") {
         column-count: 2;
      }

      @include global.container-query-selector(".section-item-title") {
         font-size: map.get($params, "title-font-size");
         padding: map.get($params, "title-padding");
      }

      @include global.container-query-selector(".left") {
         width: map.get($params, "item-left-side-width");
         display: block;
      }

      @include global.container-query-selector(".right") {
         width: map.get($params, "item-right-side-width");
      }

      @include global.container-query-selector(".title-rwd") {
         display: none;
      }

      @include global.container-query-selector(".section-item") {
         @include global.container-query-selector(".#{component("Picture", "class")}") {
            max-width: unset;
            width: auto;
         }
      }

      @include global.container-query-selector(".section-item-inner") {
         padding: map.get($params, "item-padding");
      }
   }

   @container (inline-size > 1199px) {
      @include global.container-query-selector("ul") {
         column-count: 3;
      }
   }

   @container (inline-size < 500px) {
      @include global.container-query-selector(".section-item") {
         display: flex;
         align-items: center;
      }

      @include global.container-query-selector(".section-item-inner") {
         flex: 1;
      }

      @include global.container-query-selector(".right") {
         padding-bottom: 10px;

         > h2 {
            display: none;
         }

         @include global.container-query-selector("&.hidden") {
            display: none;
         }
      }
   }
}
