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

$params: (
   "margin-bottom": global.$spacer,
   "gap": global.$gap-width,
   "max-width": 50px,
   "visible-count": 4,

   "image-overlay": false,
   "image-overlay-active": false,

   "border-radius": global.$border-radius-lg,
   "border": 1px solid global.$border-color,
   "border-active": 1px solid global.$brand-primary,

   "image-padding": 4px,
   "background-color": global.$white,

   "product-title": true,
   "product-title-color": global.$text-muted,
   "product-title-font-size": global.$font-size-smaller,
   "product-title-font-weight": global.$font-weight-base,
   "product-title-line-height": global.$line-height-sm,
   "product-title-margin": 5px 0 0,

   "active-icon-size": 26px,
   "active-icon-color": global.$white,
   "active-icon-background": global.$state-success,
   "active-icon-border-radius": global.$border-radius-base,

   "scroll-icon-font-size": 17px,
   "scroll-icon-bottom": -25px,
);

@if global-variable-exists(c-product-collections-squarescatalog, components) {
   $keys: map.keys(components.$c-product-collections-squarescatalog);
   @each $name in $keys {
      @if not map.get($params, $name) {
         @warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("Product:Collections:SquaresCatalog", "class")}'.";
      }
   }

   $params: map.merge($params, components.$c-product-collections-squarescatalog);
}

.#{component("Product:Collections:SquaresCatalog", "class")} {
   width: 100%;
   max-width: map.get($params, "max-width");
   margin-bottom: map.get($params, "margin-bottom");
   container-type: inline-size;
   display: none;

   @media (min-width: global.$lg) {
      display: block;
   }

   .scroll-detector {
      position: absolute;
      bottom: map.get($params, "scroll-icon-bottom");
      font-size: map.get($params, "scroll-icon-font-size");
      left: 50%;
      transform: translateX(-50%);
   }

   > div {
      display: flex;
      flex-direction: column;
      gap: map.get($params, "gap");
      max-height: calc(#{map.get($params, "visible-count")} * #{map.get($params, "max-width")} + #{map.get($params, "gap")} * (#{map.get($params, "visible-count")} - 1));
      overflow-y: auto;
      scrollbar-width: none;

      &::-webkit-scrollbar {
         width: 0;
      }
   }

   a {
      @include global.underline-hover;

      display: block;

      @include global.haf {
         .image {
            border: map.get($params, "border-active");
         }
      }
   }

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

      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      padding: map.get($params, "image-padding");
      border-radius: map.get($params, "border-radius");
      border: map.get($params, "border");
      transition: all global.$transition-speed;
      background-color: map.get($params, "background-color");

      svg {
         display: none;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         font-size: map.get($params, "active-icon-size");
         background: map.get($params, "active-icon-background");
         color: map.get($params, "active-icon-color");
         border-radius: map.get($params, "active-icon-border-radius");
         padding: 5px;
      }

      .#{component("Picture", "class")} {
         margin: 0;
         padding: 0;

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

   span {
      @if (map.get($params, "product-title")) {
         display: block;
         color: map.get($params, "product-title-color");
         font-size: map.get($params, "product-title-font-size");
         font-weight: map.get($params, "product-title-font-weight");
         line-height: map.get($params, "product-title-line-height");
         margin: map.get($params, "product-title-margin");
      } @else {
         display: none;
      }
   }

   .active {
      cursor: default;

      &:active {
         pointer-events: none;
      }

      .image {
         @if (map.get($params, "image-overlay-active")) {
            @include global.image-overlay(map.get($params, "image-padding"));
         } @else if (map.get($params, "image-overlay")) {
            @include global.delete-before;
         }

         border: map.get($params, "border-active");

         svg {
            display: block;
         }
      }
   }
}
