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

$params: (
   "map-border-radius": global.$border-radius-lg,
   "map-mobile-height": 400px,
   "map-desktop-height": 790px,
   "map-modal-size": 515px,
   "pin-color": global.$brand-secondary,
   "pin-hover-color": global.$black,
   "user-pin-color": global.$white,
   "user-pin-background": global.$green,
   "cluster-text-color": global.$white,
   "cluster-font-size": 20px,
   "cluster-background": darken(global.$brand-secondary, 15),
);

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

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

.#{component("SellerSelection:SellerMap", "class")} {
   .sellers-map-label {
      width: 38px;
      height: 50px;
      align-items: center;
      justify-content: center;
      overflow: visible !important;
      color: map.get($params, "pin-color");
      display: flex !important;
      cursor: pointer;

      svg {
         fill: currentColor;

         * {
            fill: currentColor;
         }
      }

      &.hover, &.active, &.highlighted {
         color: map.get($params, "pin-hover-color");
      }
   }

   .user-position-marker {
      color: map.get($params, "user-pin-color");

      svg {
         width: 34px;
         height: 34px;
         padding: 6px;
         fill: currentColor;
         background-color: map.get($params, "user-pin-background");
         border-radius: 50%;

         * {
            fill: currentColor;
         }
      }
   }

   .cluster {
      display: flex;
      align-items: center;
      justify-content: center;
      color: map.get($params, "cluster-text-color");
      font-size: map.get($params, "cluster-font-size");
      background-color: map.get($params, "cluster-background");
      width: 50px;
      height: 50px;
      border-radius: 50%;

      > div {
         top: calc(50% - 12px);
      }

      &:hover {
         background-color: map.get($params, "pin-hover-color");
      }
   }

   .seller-selection-map {
      width: 100%;
      height: map.get($params, "map-mobile-height");
   }

   .seller-icon-point-count {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      color: global.$white;
      font-size: global.$font-size-h4;
      font-weight: global.$font-weight-bold;
   }

   // modalove styly
   .c-modal & {
      .seller-selection-map {
         height: map.get($params, "map-modal-size");
         width: map.get($params, "map-modal-size");
      }
   }

   @media screen and (min-width: global.$lg) {
      .seller-selection-map {
         height: map.get($params, "map-desktop-height");
         border-top-right-radius: map.get($params, "map-border-radius");
         border-bottom-right-radius: map.get($params, "map-border-radius");

         .#{component("Modal", "class")} & {
            border-radius: 0;
         }
      }
   }
}
