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

$params: (
   "product-min-width": 436px,
   "product-min-height": 120px,
   "product-width": 100%,
   "product-padding": 0 10px,

   "product-code-color": global.$text-muted,
   "product-code-font-size": global.$font-size-smaller,
   "product-code-font-weight": global.$font-weight-base,

   "hover-background-color": global.$body-bg-alt,

   "title-color": global.$text-dark,
   "title-font-size": global.$font-size-base,
   "title-font-weight": global.$font-weight-bold,
   "title-text-decoration": unset,
   "title-max-width": 300px,
   "title-height": 36px,
   "title-line-height": 1.4,
   "title-line-clamp": 2,

   "param-color": global.$text-dark,
   "param-font-size": global.$font-size-base,
   "param-font-weight": global.$font-weight-base,

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

@if global-variable-exists(c-productlist-tableview-tableproduct, components) {
   $keys: map.keys(components.$c-productlist-tableview-tableproduct);
   @each $name in $keys {
      @if not map.get($params, $name) {
         @warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("ProductList:TableView:TableProduct", "class")}'.";
      }
   }

   $params: map.merge($params, components.$c-productlist-tableview-tableproduct);
}

.#{component("ProductList:TableView:TableProduct", "class")} {
   display: flex;
   padding: map.get($params, "product-padding");
   min-width: map.get($params, "product-min-width");
   min-height: map.get($params, "product-min-height");
   height: 100%;


   @include global.haf {
      background-color: map.get($params, "hover-background-color");
      cursor: pointer;

      .#{component("Picture", "class")} {
         @include global.image-overlay(0);
      }
   }

   a {
      display: flex;
      align-items: center;
      text-decoration: map.get($params, "title-text-decoration");
   }

   .info-wrapper {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
   }

   .product-code {
      color: map.get($params, "product-code-color");
      font-size: map.get($params, "product-code-font-size");
      font-weight: map.get($params, "product-code-font-weight");
   }

   .title {
      color: map.get($params, "title-color");
      font-size: map.get($params, "title-font-size");
      font-weight: map.get($params, "title-font-weight");
      max-width: map.get($params, "title-max-width");
      height: map.get($params, "title-height");
      line-height: map.get($params, "title-line-height");
      overflow: hidden;
      -webkit-line-clamp: map.get($params, "title-line-clamp");
      display: -webkit-box;
      -webkit-box-orient: vertical;
   }

   .parameter {
      color: map.get($params, "param-color");
      font-size: map.get($params, "param-font-size");
      font-weight: map.get($params, "param,font-weight");
   }

   .#{component("Product:Price", "class")} {
      > div {
         strong {
            font-size: map.get($params, "price-font-size");
            font-weight: map.get($params, "price-font-weight");
         }
      }
   }
}
