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

$params: (
   "width": 400px,

   "variation-color": global.$text-muted,
   "variation-font-size": global.$font-size-smaller,
);

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

   $params: map.merge($params, components.$c-product-watchdog-form);
}

.#{component("Product:WatchDog:Forms:Form", "class")} {
   container-type: inline-size;
   width: map.get($params, "width");
   max-width: 100%;

   .product-info {
      margin-bottom: global.$spacer;

      p {
         margin: 0
      }

      .variation {
         font-size: map.get($params, 'variation-font-size');
         color: map.get($params, 'variation-color');
      }
   }

   input[type="checkbox"] {
      display: none;
   }

   .form-group {
      > div {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
      }
   }
}

