Merged in feat/SW-2511-hotel-page-map (pull request #2582)

feat(SW-2511): hotel page map and marker improvements

* feat(SW-2511): update hotel page map

* fix(SW-2511): fix issue with identical id's for POIs


Approved-by: Anton Gunnarsson

apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/poiMapMarkers.module.css

@@ -1,14 +1,14 @@
 .advancedMarker {
-  height: var(--Spacing-x4);
+  height: var(--Space-x4);
   width: var(
-    --Spacing-x4
+    --Space-x4
   ) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
 }
 
 .advancedMarker.active {
-  height: var(--Spacing-x5);
+  height: var(--Space-x5);
   width: var(
-    --Spacing-x5
+    --Space-x5
   ) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
 }
 
@@ -19,15 +19,15 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: var(--Spacing-x-half);
+  padding: var(--Space-x05);
   border-radius: var(--Corner-radius-rounded);
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  background-color: var(--Surface-UI-Fill-Default);
   box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .poi.active {
-  padding-right: var(--Spacing-x-one-and-half);
+  padding-right: var(--Space-x15);
 }
 
 .poiLabel {
@@ -37,6 +37,10 @@
 .poi.active .poiLabel {
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   text-wrap: nowrap;
 }
+
+.distance {
+  color: var(--Text-Secondary);
+}