moved tooltip scss

src/components/map/tooltips/MapLocationTooltip.tsx

@@ -1,4 +1,5 @@
 import {MapLocation} from "../../../types/MapLocation.ts";
+import "./Tooltip.scss";
 
 interface MapLocationTooltipProps {
     location: MapLocation;

src/components/map/tooltips/MapRegionTooltip.tsx

@@ -3,6 +3,7 @@ import CapitalIcon from "../../icons/CapitalIcon.tsx";
 import PopulationIcon from "../../icons/PopulationIcon.tsx";
 import RulerIcon from "../../icons/RulerIcon.tsx";
 import DescriptionIcon from "../../icons/DescriptionIcon.tsx";
+import "./Tooltip.scss";
 
 interface MapLocationTooltipProps {
     region: MapRegion;

src/components/map/tooltips/Tooltip.scss

@@ -0,0 +1,97 @@
+.tooltip {
+    position: absolute;
+    display: none;
+    padding: 10px;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    border-radius: 5px;
+    z-index: 1000;
+    max-width: 300px;
+
+    flex-direction: column;
+    gap: 15px;
+
+    //-webkit-user-select: none;
+    //-ms-user-select: none;
+    //user-select: none;
+
+    h3 {
+        margin: 0;
+        font-size: 26px;
+    }
+
+    a.titlelink {
+        color: #fff;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    .border {
+        width: 100%;
+        height: 1px;
+        background-color: #fff;
+    }
+
+    span {
+        font-size: 1.2rem;
+    }
+
+    img.locationimg {
+        width: 100%;
+        height: auto;
+        border-radius: 5px;
+    }
+
+    a.more {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+
+        img {
+            --hw: 23px;
+            height: var(--hw);
+            width: var(--hw);
+        }
+    }
+
+    .detailbox {
+        display: flex;
+        //align-items: center;
+        gap: 7px;
+
+        img, svg {
+            --hw: 23px;
+            height: var(--hw);
+            width: var(--hw);
+            min-width: var(--hw);
+        }
+
+        span {
+            font-size: 1.2rem;
+            //margin-top: 0px;
+        }
+    }
+
+    @media (max-width: 768px) {
+        h3 {
+            font-size: 1.2rem;
+        }
+
+        span {
+            font-size: .8rem;
+        }
+
+        .detailbox {
+            img, svg {
+                --hw: 15px;
+            }
+
+            span {
+                font-size: .8rem;
+            }
+        }
+    }
+}

src/index.scss

@@ -80,109 +80,11 @@ a {
 }
 
 @media (max-width: 1200px) {
-    body {
+    #root {
         flex-direction: column;
     }
 
     .legend {
         max-width: 100%;
     }
-}
-
-.tooltip {
-    position: absolute;
-    display: none;
-    padding: 10px;
-    background-color: rgba(0, 0, 0, 0.8);
-    color: #fff;
-    border-radius: 5px;
-    z-index: 1000;
-    max-width: 300px;
-
-    flex-direction: column;
-    gap: 15px;
-
-    //-webkit-user-select: none;
-    //-ms-user-select: none;
-    //user-select: none;
-
-    h3 {
-        margin: 0;
-        font-size: 26px;
-    }
-
-    a.titlelink {
-        color: #fff;
-        text-decoration: none;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
-    .border {
-        width: 100%;
-        height: 1px;
-        background-color: #fff;
-    }
-
-    span {
-        font-size: 1.2rem;
-    }
-
-    img.locationimg {
-        width: 100%;
-        height: auto;
-        border-radius: 5px;
-    }
-
-    a.more {
-        display: flex;
-        align-items: center;
-        gap: 7px;
-
-        img {
-            --hw: 23px;
-            height: var(--hw);
-            width: var(--hw);
-        }
-    }
-
-    .detailbox {
-        display: flex;
-        //align-items: center;
-        gap: 7px;
-
-        img, svg {
-            --hw: 23px;
-            height: var(--hw);
-            width: var(--hw);
-            min-width: var(--hw);
-        }
-
-        span {
-            font-size: 1.2rem;
-            //margin-top: 0px;
-        }
-    }
-
-    @media (max-width: 768px) {
-        h3 {
-            font-size: 1.2rem;
-        }
-
-        span {
-            font-size: .8rem;
-        }
-
-        .detailbox {
-            img, svg {
-                --hw: 15px;
-            }
-
-            span {
-                font-size: .8rem;
-            }
-        }
-    }
 }