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

$params: (
   "margin": 20px -10px -20px,
   "padding": 20px 10px 10px,

   "background": global.$body-bg-alt,
   "products-background": global.$body-bg-alt,
   "products-height": 258px,
   "product-width": 150px,
   "product-gap": global.$gap-width,

   "border-color": global.$border-color,

   "title-color": global.$text-dark,
   "title-font-size": global.$font-size-h4,
   "title-font-weight": global.$font-weight-bold,

   "ring-width": 50px,
   "ring-height": 50px,
   "ring-border": 6px solid global.$border-color,
   "ring-border-color": global.$border-color transparent global.$border-color transparent,
);

@if global-variable-exists(c-added-to-cart-resp-alsobought, components) {
   $keys: map.keys(components.$c-added-to-cart-resp-alsobought);
   @each $name in $keys {
      @if not map.get($params, $name) {
         @warn "Neexistující proměnná '#{$name}' v komponentě 'added-to-cart-resp-alsobought'.";
      }
   }

   $params: map.merge($params, components.$c-added-to-cart-resp-alsobought);
}

.js-shop-added-to-cart-resp-cartbox-alsobought {
   margin: map.get($params, "margin");
   padding: map.get($params, "padding");
   background: map.get($params, "background");

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

   > div {
      min-height: map.get($params, "products-height");

      > div {
         position: relative;
         z-index: 1;
         background: map.get($params, "products-background");
      }

      &::before {
         content: '';
         display: block;
         width: map.get($params, "ring-width");
         height: map.get($params, "ring-height");
         margin: auto;
         border-radius: 50%;
         border: map.get($params, "ring-border");
         border-color: map.get($params, "ring-border-color");
         animation: lds-dual-ring 1.2s linear infinite;
         position: absolute;
         left: 0;
         right: 0;
         top: calc(50% - 25px);
         bottom: 0;
      }
   }

   .cartbox-alsobought-products {
      padding: 0;

      > div {
         display: flex;
         justify-content: space-between;
      }
   }

   .cartbox-alsobought-product {
      width: map.get($params, "product-width");
      min-width: map.get($params, "product-width");
      margin-right: map.get($params, "product-gap");
   }
}
