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

$params: (
   "breakpoint-sm": global.$sm,
   "breakpoint-md": global.$md,
   "breakpoint-xl": global.$xl,

   "margin-bottom": global.$spacer,

   "inner-grid-template-columns": 1fr,
   "inner-grid-template-columns-sm": repeat(2, 1fr),
   "inner-grid-template-columns-md": repeat(3, 1fr),
   "inner-grid-template-columns-xl": repeat(4, 1fr),
   "inner-gap": 20px,

   "toggler-padding": 20px 5px,
   "toggler-text-align": left,

   "toggler-btn-style": "false",
   "toggler-btn-text-decoration-mixin": "default",
   "toggler-btn-color": global.$text-muted,
   "toggler-btn-font-size": global.$font-size-base,
   "toggler-btn-font-weight": global.$font-weight-bold,
   "toggler-btn-text-transform": none,
   "toggler-btn-letter-spacing": normal,
   "toggler-btn-text-underline-offset": 5px,
);

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

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

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

   .inner {
      display: grid;
      grid-template-columns: map.get($params, "inner-grid-template-columns");
      gap: map.get($params, "inner-gap");
   }

   .toggler {
      padding: map.get($params, "toggler-padding");
      text-align: map.get($params, "toggler-text-align");

      button {
         @if (map.get($params, "toggler-btn-style") == "false") {
            @include global.btn-reset;

            color: map.get($params, "toggler-btn-color");
            font-size: map.get($params, "toggler-btn-font-size");
            font-weight: map.get($params, "toggler-btn-font-weight");
            text-transform: map.get($params, "toggler-btn-text-transform");
            letter-spacing: map.get($params, "toggler-btn-letter-spacing");
            text-underline-offset: map.get($params, "toggler-btn-text-underline-offset");

            @if (map.get($params, "toggler-btn-text-decoration-mixin") == "default") {
               @include global.underline-default;
            } @else if (map.get($params, "toggler-btn-text-decoration-mixin") == "hover") {
               @include global.underline-hover;
            }
         } @else {
            @include global.btn;
            @include global.set-btn-style(map.get($params, "toggler-btn-style"));
         }

         cursor: pointer;
      }
   }

   @container (inline-size > #{map.get($params, "breakpoint-sm")}) {
      @include global.container-query-selector('.inner') {
         grid-template-columns: map.get($params, "inner-grid-template-columns-sm");
      }
   }

   @container (inline-size > #{map.get($params, "breakpoint-md")}) {
      @include global.container-query-selector('.inner') {
         grid-template-columns: map.get($params, "inner-grid-template-columns-md");
      }
   }

   @container (inline-size > #{map.get($params, "breakpoint-xl")}) {
      @include global.container-query-selector('.inner') {
         grid-template-columns: map.get($params, "inner-grid-template-columns-xl");
      }
   }
}
