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

$params: (
   "header-border": global.$border-width solid global.$border-color,
   "header-border-radius": global.$border-radius-lg,
   "header-background-color": transparent,
   "header-color": global.$text-dark,
   "header-font-size": global.$font-size-smaller,
   "header-font-weight": global.$font-weight-base,
   "header-text-align": left,
   "header-padding": 13px 10px,
   "header-line-height": global.$line-height-sm,

   "row-border": global.$border-width solid global.$border-color,
   "row-text-align": center,
   "row-padding": 10px 0,
   "row-height": 100%,
   "row-min-height": 67px,

   "title-color": global.$text-dark,
   "title-font-size": global.$font-size-base,
   "title-font-weight": global.$font-weight-bold,
   "title-text-align": left,
   "title-width": unset,

   "price-with-vat-color": global.$text-dark,
   "price-with-vat-font-size": global.$font-size-base,
   "price-with-vat-font-weight": global.$font-weight-base,

   "price-without-vat-color": global.$text-dark,
   "price-without-vat-font-size": global.$font-size-base,
   "price-without-vat-font-weight": global.$font-weight-base,

   "discount-price-color": global.$discount-color,
   "discount-price-font-size": global.$font-size-base,
   "discount-price-font-weight": global.$font-weight-base,

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

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

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

   "buy-count-margin": 0 0 0 25px,

   "width": 70px,
   "border": global.$input-border-width solid global.$input-border-color,
   "border-radius": global.$border-radius-base,

   "table-column-width": 17.5%,
   "table-max-height": 470px,
   "table-padding": 0 5px 0 0,
   "table-margin": 5px 0 0 0,

   "table-width-sm": 540px,

   "delivery-time-margin": 0,
);

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

   $params: map.merge($params, components.$c-product-variationlabel-b2blist);
}

.#{component("Product:VariationLabel:B2BList", "class")} {
   container-type: inline-size;

   .buy-count-wrapper {
      display: flex;
      flex-shrink: 0;
      width: map.get($params, "width");
      border: map.get($params, "border");
      border-radius: map.get($params, "border-radius");

      .form-control {
         padding-left: 0;
         padding-right: 0;
         text-align: center;
         width: 60%;
         border-radius: map.get($params, "border-radius");

         @if (map.get($params, "border")) {
            border: 0;
         }
      }

      > div {
         display: flex;
         flex-direction: column;
         width: 40%;

         button {
            @include global.btn-reset;

            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
         }
      }
   }

   table {
      width: 100%;
      border-collapse: collapse;

      thead,tbody, tr {
         display: table;
         width: 100%;
         table-layout: fixed;
      }

      .table-header {
         height: 100%;
         vertical-align: middle;
         outline: map.get($params, "header-border");
         background-color: map.get($params, "header-background-color");
         color: map.get($params, "header-color");
         font-size: map.get($params, "header-font-size");
         border-radius: map.get($params, "header-border-radius");
         text-align: map.get($params, "header-text-align");
         line-height: map.get($params, "header-line-height");

         .title {
            font-size: map.get($params, "header-font-size");
            color: map.get($params, "header-color");
         }

         th {
            font-weight: map.get($params, "header-font-weight");
            padding: map.get($params, "header-padding");
            height: 100%;
            justify-content: center;

            &:not(.title) {
               width: map.get($params, "table-column-width");
               text-align: center;
            }

            &:first-child {
               border-top-left-radius: map.get($params, "header-border-radius");
               border-bottom-left-radius: map.get($params, "header-border-radius");
            }

            &:last-child {
               border-top-right-radius: map.get($params, "header-border-radius");
               border-bottom-right-radius: map.get($params, "header-border-radius");
            }
         }
      }

      tbody {
         display: block;
         overflow-y: auto;
         max-height: map.get($params, "table-max-height");
         padding: map.get($params, "table-padding");
         margin: map.get($params, "table-margin");
         @include global.custom-scrollbar;

         tr {
            display: table;
            width: 100%;
            table-layout: fixed;
         }
      }

      tr:not(.table-header) {
         border-bottom: map.get($params, "row-border");
      }

      td {
         text-align: map.get($params, "row-text-align");
         padding: map.get($params, "row-padding");
         height: map.get($params, "row-height");
         min-height: map.get($params, "row-min-height");
         justify-content: center;

         &:not(.title) {
            width: map.get($params, "table-column-width");
         }
      }

      .title {
         display: flex;
         flex-direction: column;
         color: map.get($params, "title-color");
         font-size: map.get($params, "title-font-size");
         font-weight: map.get($params, "title-font-weight");
         text-align: map.get($params, "title-text-align");
         width: map.get($params, "title-width");
      }

      .price-with-vat {
         color: map.get($params, "price-with-vat-color");
         font-size: map.get($params, "price-with-vat-font-size");
         font-weight: map.get($params, "price-with-vat-font-weight");
      }

      .price-without-vat {
         color: map.get($params, "price-without-vat-color");
         font-size: map.get($params, "price-without-vat-font-size");
         font-weight: map.get($params, "price-without-vat-font-weight");

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

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

      .flex-column {
         display: flex;
         flex-direction: column;
      }

      .#{component("Product:DeliveryTime", "class")} {
         margin: map.get($params, "delivery-time-margin");
      }

      .buy-count-content-wrapper {
         display: flex;
         justify-content: center;
         margin: map.get($params, "buy-count-margin");
      }

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

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

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

      .btn-watchdog {
         @include global.btn-watchdog;
      }
   }

   @container (inline-size < 580px) {
      overflow-x: auto;
      padding: 5px;

      @include global.container-query-selector("table") {
         width: map.get($params, "table-width-sm");
      }
   }
}
