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

$params: (
   "active-seller-border": 1px solid global.$border-color,
   "active-seller-border-radius": global.$border-radius-base,
   "active-seller-desktop-distance": 20px,
   "active-seller-desktop-spacing": 15px,
   "active-seller-mobile-spacing": 10px,
   "active-seller-list-gap": 10px,
   "active-seller-desktop-gap": 40px,
);

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

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

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

   .active-seller {
      padding-bottom: map.get($params, "active-seller-mobile-spacing");
      margin-bottom: map.get($params, "active-seller-mobile-spacing");
      border-bottom: map.get($params, "active-seller-border");

      .h4 {
         margin-bottom: map.get($params, "active-seller-mobile-spacing");
      }
   }

   .active-seller-details-wrapper {
      display: flex;
      flex-direction: column;
      gap: map.get($params, "active-seller-desktop-spacing");

      img {
         display: block;
         width: 100%;
         border-radius: map.get($params, "active-seller-border-radius");
      }

      .active-seller-detailed-info {
         display: flex;
         flex-direction: column;
         gap: map.get($params, "active-seller-list-gap");

         p {
            margin-bottom: map.get($params, "active-seller-mobile-spacing");
         }

         p:last-child {
            margin-bottom: 0;
         }
      }

      .active-seller-opening-hours-day {
         display: flex;
         gap: 5px;
      }
   }

   @container (inline-size > 700px) {
      .active-seller {
         padding-bottom: map.get($params, "active-seller-desktop-distance");
         margin-bottom: map.get($params, "active-seller-desktop-distance");

         .h4 {
            margin-bottom: map.get($params, "active-seller-desktop-spacing");
         }
      }

      .active-seller-details-wrapper {
         gap: map.get($params, "active-seller-desktop-gap");
         flex-direction: row;

         .active-seller-details {
            flex: 1 1 auto;
         }

         img {
            width: 220px;
            height: auto;
         }

         .active-seller-detailed-info {
            flex-direction: row;
            gap: map.get($params, "active-seller-desktop-gap");

            p {
               margin-bottom: map.get($params, "active-seller-desktop-spacing");
            }
         }
      }
   }
}
