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

$params: (
   "margin-bottom": global.$spacer,
   "gap": global.$gap-width,
);

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

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

.#{component("Product:Charges", "class")} {
   width: 100%;
   container-type: inline-size;

   > div {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-bottom: map.get($params, "margin-bottom");
      gap: map.get($params, "gap");
   }
}
