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

$params: (
   "slider-border-radius": global.$border-radius-lg,

   "content-offset-top": unset,
   "content-offset-left": 50px,
   "content-offset-right": unset,
   "content-offset-bottom": 50px,
   "content-offset-left-sm": 25px,
   "content-offset-right-sm": 25px,
   "content-offset-bottom-sm": 25px,

   "theme-black-overlay": "true",
   "theme-black-color": global.$white,
   "theme-white-color": global.$text-dark,

   "video-display": block,
   "video-max-width": 100%,
   "video-width": 100%,
   "video-height": auto,

   "title-max-width": none,
   "title-font-size": global.$font-size-h1,
   "title-font-weight": global.$font-weight-bold,
   "title-font-family": global.$font-family-base,
   "title-line-height": global.$headings-line-height,
   "title-margin": 0 0 8px 0,
   "title-font-size-sm": global.$font-size-h2,
   "title-text-align-sm": start,

   "descr-max-width": none,
   "descr-font-size": global.$font-size-h4,
   "descr-font-weight": global.$font-weight-bold,
   "descr-line-height": global.$line-height-sm,
   "descr-font-family": global.$font-family-base,
   "descr-margin": 0 0 20px 0,
   "descr-font-size-sm": global.$font-size-h4,
   "descr-text-align-sm": start,

   "descr-button-min-width": auto,
   "descr-button-style-dark": "btn-primary",
   "descr-button-style-light": "btn-white",

   "product-max-width": 294px,
   "product-max-height": 375px,
   "product-offset-right": 110px,
   "product-offset-left": unset,
   "product-breakpoint-hide": global.$lg,
);

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

   $params: map.merge($params, components.$c-sliders-homeslide);
}

.#{component("Sliders:HomeSlide", "class")} {
   position: relative;
   overflow: hidden;
   border-radius: map.get($params, "slider-border-radius");
   container-type: inline-size;

   > a {
      position: relative;
      display: block;
      width: 100%;
   }

   &.theme-black {
      @if (map.get($params, "theme-black-overlay") == "true") {
         > a {
            @include global.dark-overlay;
         }
      }

      .content {
         color: map.get($params, "theme-black-color");
      }
   }

   &.theme-white {
      color: map.get($params, "theme-white-color");
   }

   .content {
      position: absolute;
      z-index: 1;
      top: map.get($params, "content-offset-top");
      left: map.get($params, "content-offset-left");
      right: map.get($params, "content-offset-right");
      bottom: map.get($params, "content-offset-bottom");

      .title {
         max-width: map.get($params, "title-max-width");
         font-size: map.get($params, "title-font-size");
         font-weight: map.get($params, "title-font-weight");
         font-family: map.get($params, "title-font-family");
         margin: map.get($params, "title-margin");
         line-height: map.get($params, "title-line-height");
      }

      .descr {
         max-width: map.get($params, "descr-max-width");
         font-size: map.get($params, "descr-font-size");
         font-weight: map.get($params, "descr-font-weight");
         font-family: map.get($params, "descr-font-family");
         margin: map.get($params, "descr-margin");
         line-height: map.get($params, "descr-line-height");
      }
   }

   .#{component("Video", "class")} {
      video {
         display: map.get($params, "video-display");
         width: map.get($params, "video-width");
         max-width: map.get($params, "video-max-width");
         height: map.get($params, "video-height");
      }
   }

   .btn {
      min-width: map.get($params, "descr-button-min-width");
   }

   .btn-light {
      @include global.set-btn-style(map.get($params, "descr-button-style-light"));
   }

   .btn-dark {
      @include global.set-btn-style(map.get($params, "descr-button-style-dark"));
   }

   .#{component("ProductList:PreviewItem", "class")} {
      position: absolute;
      z-index: 1;
      max-width: map.get($params, "product-max-width");
      top: 50%;
      transform: translateY(-50%);
      right: map.get($params, "product-offset-right");
      left: map.get($params, "product-offset-left");
      max-height: map.get($params, "product-max-height");
      height: 96%;

      > a {
         display: flex;
         flex-direction: column;
         height: 100%;

         .#{component("Picture", "class")} {
            flex: 1;

            img {
               max-height: 100%;
               width: auto;
            }
         }
      }
   }

   @media screen and (max-width: map.get($params, "product-breakpoint-hide") - 1) {
      .#{component("ProductList:PreviewItem", "class")} {
         display: none;
      }
   }

   @container (inline-size < 750px) {
      .content {
         left: map.get($params, "content-offset-left-sm");
         right: map.get($params, "content-offset-right-sm");
         bottom: map.get($params, "content-offset-bottom-sm");

         .title {
            font-size: map.get($params, "title-font-size-sm");
            text-align: map.get($params, "title-text-align-sm");
         }

         .descr {
            font-size: map.get($params, "descr-font-size-sm");
            text-align: map.get($params, "descr-text-align-sm");
         }

         .btn {
            display: block;
         }
      }
   }
}
