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

$params: (
   "gap": 15px,
   "line-height": global.$line-height-sm,
   "padding": 0 20px,
   "border-left": global.$border-width solid global.$border-color,
   "max-width": 470px,

   "grid-layout": "false",
   "grid-template-areas": "picture title delivery",
   "grid-template-columns": 60px 1fr auto,

   "image-width": 60px,
   "image-overlay": true,
   "image-overlay-padding": global.$gap-width,
   "image-border": 0,
   "image-border-radius": global.$border-radius-base,

   "title-color": global.$text-dark,
   "title-font-size": global.$font-size-base,
   "title-font-weight": global.$font-weight-bold,
   "title-line-clamp": 3,

   "delivery-wrapper-align-items": flex-start,
   "delivery-wrapper-justify-content": flex-start,
   "delivery-wrapper-flex-direction": column,
   "delivery-wrapper-gap": unset,
   "delivery-wrapper-margin-left": auto,

   "delivery-font-size": global.$font-size-base,
   "delivery-font-weight": global.$font-weight-bold,
);

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

   $params: map.merge($params, components.$c-product-stickyline-productinfo);
}

.#{component("Product:StickyLine:ProductInfo", "class")} {
   display: flex;
   flex: 1;
   max-width: map.get($params, "max-width");
   align-items: center;
   margin-left: auto;
   gap: map.get($params, "gap");
   line-height: map.get($params, "line-height");
   padding: map.get($params, "padding");
   border-left: map.get($params, "border-left");
   opacity: 0;
   pointer-events: none;
   transition: opacity global.$transition-speed;

   @if (map.get($params, "grid-layout") == "true") {
      display: grid;
      grid-template-areas: map.get($params, "grid-template-areas");
      grid-template-columns: map.get($params, "grid-template-columns");
   }

   &.is-visible {
      opacity: 1;
      pointer-events: auto;
   }

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

      grid-area: picture;
      width: map.get($params, "image-width");
      border: map.get($params, "image-border");
      border-radius: map.get($params, "image-border-radius");
      overflow: hidden;
   }

   .title {
      grid-area: title;
      flex: 1;
      color: map.get($params, "title-color");
      font-size: map.get($params, "title-font-size");
      font-weight: map.get($params, "title-font-weight");
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: map.get($params, "title-line-clamp");
      -webkit-box-orient: vertical;
      overflow: hidden;
   }

   .delivery-wrapper {
      grid-area: delivery;
      display: flex;
      align-items: map.get($params, "delivery-wrapper-align-items");
      justify-content: map.get($params, "delivery-wrapper-justify-content");
      flex-direction: map.get($params, "delivery-wrapper-flex-direction");
      gap: map.get($params, "delivery-wrapper-gap");
      margin-left: map.get($params, "delivery-wrapper-margin-left");
   }

   .delivery {
      display: inline-block;
      color: global.$delivery-ondemand;
      font-size: map.get($params, "delivery-font-size");
      font-weight: map.get($params, "delivery-font-weight");
      margin: 0;
   }

   @each $time, $color in global.$deliveries {
      .delivery-#{$time} {
         color: $color;
      }
   }

   button {
      @include global.btn-reset;
      @include global.underline-default;

      cursor: pointer;
   }
}
