@geoinsight/react-components 0.8.11 → 1.0.0

package/dist/cjs/index.css

@@ -17,6 +17,7 @@
 
   --spacing-4: 0.25rem;
   --spacing-8: 0.5rem;
+  --spacing-12: 0.75rem;
   --spacing-16: 1rem;
   --spacing-20: 1.25rem;
   --spacing-24: 1.5rem;
@@ -40,35 +41,51 @@
   --color-neutral-700: #403b3a;
   --color-neutral-800: #201e1d;
 
-  --color-success: #20e52f;
-  --color-danger: #e52f20;
+  /* --color-success: #20e52f;
+  --color-danger: #e52f20; */
 
   --transition-bg-cubic-bezier: background-color 500ms
     cubic-bezier(0.1, 0.2, 0.3, 0.4);
   --transition-color-cubic-bezier: color 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
-  --transition-text-decoration-cubic-bezier: text-decoration 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
-  --transition-box-shadow-cubic-bezier: box-shadow 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-text-decoration-cubic-bezier: text-decoration 500ms
+    cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-text-underline-offset-cubic-bezier: text-underline-offset 250ms
+    cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-box-shadow-cubic-bezier: box-shadow 500ms
+    cubic-bezier(0.1, 0.2, 0.3, 0.4);
+
+  --color-dark-base: #2e3440;
+  --color-dark-bright: #3b4252;
+  --color-dark-brighter: #434c5e;
+  --color-dark-brightest: #4c566a;
 
+  --color-light-base: #d8dee9;
+  --color-light-bright: #e5e9f0;
+  --color-light-brighter: #eceff4;
 
+  --color-primary-base: #8fbcbb;
+  --color-primary-bright: #88c0d0;
+  --color-primary-dark: #81a1c1;
+  --color-primary-darker: #5e81ac;
+
+  --color-danger: #bf616a;
+  --color-warning: #ebcb8b;
+  --color-success: #a3be8c;
+  --color-info: #b48ead;
 }
 
 [data-theme="dark"] {
-  --color-neutral-900: var(--color-black);
-  --color-neutral-100: var(--color-white);
-  --color-primary: var(--color-primary-500);
-  --color-secondary: var(--color-primary-600);
-
-  color: var(--color-neutral-100) !important;
-  background-color: var(--color-neutral-900) !important;
+  --color-main-background: var(--color-dark-base);
+  --color-main-color: var(--color-light-base);
+  color: var(--color-main-color) !important;
+  background-color: var(--color-main-background) !important;
 }
 
 [data-theme="light"] {
-  --color-neutral-900: var(--color-white);
-  --color-neutral-100: var(--color-black);
-  --color-primary: var(--color-primary-600);
-  --color-secondary: var(--color-primary-500);
-  color: var(--color-neutral-900) !important;
-  background-color: var(--color-neutral-100) !important;
+  --color-main-background: var(--color-light-base);
+  --color-main-color: var(--color-dark-base);
+  color: var(--color-main-color) !important;
+  background-color: var(--color-main-background) !important;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -76,8 +93,8 @@
     color-scheme: dark;
   }
   body {
-    color: var(--color-neutral-100);
-    background-color: var(--color-neutral-900);
+    color: var(--color-main-color);
+    background-color: var(--color-main-background);
   }
 }
 
@@ -93,7 +110,7 @@
   --color-primary-900: #00588f;
 }
 
-[data-palette="earth"]{
+[data-palette="earth"] {
   --color-primary-100: #f6e3cb;
   --color-primary-200: #edc897;
   --color-primary-300: #eabe86;
@@ -116,106 +133,199 @@
   --color-primary-800: #2c5f1c;
   --color-primary-900: #1e3f12;
 }
-.accordion {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
+
+h1 {
+  font-size: var(--font-size-40);
+  font-weight: 700;
+  line-height: 1.25;
 }
 
-.accordion-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
+h2 {
+  font-size: var(--font-size-32);
+  font-weight: 700;
+  line-height: 1.25;
 }
 
-.accordion-button.button {
-  border: unset;
-  border-radius: var(--spacing-8);
-  color: var(--color-neutral-900);
-  justify-content: flex-end;
+h3 {
+  font-size: var(--font-size-24);
+  font-weight: 700;
+  line-height: 1.25;
 }
 
-.accordion-button__button.button {
-  gap: 8px;
-  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
+h4 {
+  font-size: var(--font-size-20);
+  font-weight: 700;
+  line-height: 1.25;
 }
 
-.accordion-button__link.button {
-  padding: var(--spacing-4) var(--spacing-32) var(--spacing-4) var(--spacing-16);
+h5 {
+  font-size: var(--font-size-18);
+  font-weight: 700;
+  line-height: 1.25;
 }
 
-.accordion-button__link.button:hover {
-  background-color: var(--color-primary) !important;
-  box-shadow: 0 4px 4px 0 var(--color-neutral-400);
-transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic-bezier);
-  color: var(--color-neutral-900);
-  text-decoration: unset;
-  text-underline-offset: unset;
+h6 {
+  font-size: var(--font-size-16);
+  font-weight: 700;
+  line-height: 1.25;
 }
 
-.accordion-button__button--dark.button {
-  background-color: var(--color-neutral-400);
+@media (max-width: 1385px) {
+  h1 {
+    font-size: var(--font-size-32);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h2 {
+    font-size: var(--font-size-24);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h3 {
+    font-size: var(--font-size-20);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h4 {
+    font-size: var(--font-size-18);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h5 {
+    font-size: var(--font-size-16);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h6 {
+    font-size: var(--font-size-14);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+  * {
+    font-size: var(--font-size-14);
+  }
 }
 
-.accordion-button__button--light.button {
-  background-color: var(--color-neutral-800);
+@media (max-width: 600px) {
+  h1 {
+    font-size: var(--font-size-24);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h2 {
+    font-size: var(--font-size-20);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h3 {
+    font-size: var(--font-size-18);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h4 {
+    font-size: var(--font-size-16);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h5 {
+    font-size: var(--font-size-14);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h6 {
+    font-size: var(--font-size-12);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+  * {
+    font-size: var(--font-size-12);
+  }
 }
 
-.accordion-button__link--dark.button {
-  background-color: var(--color-neutral-200) !important;
+.menu-button {
+  align-items: center;
+  background-color: var(--color-dark-bright);
+  border-radius: var(--spacing-8) var(--spacing-12) var(--spacing-12)
+    var(--spacing-8);
+  border: none;
+  color: var(--color-light-bright);
+  cursor: pointer;
+  display: flex;
+  gap: var(--spacing-8);
+  justify-content: flex-end;
+  padding: var(--spacing-4) var(--spacing-16);
+  margin: var(--spacing-4) 0;
 }
 
-.accordion-button__link--light.button {
-  background-color: var(--color-neutral-700) !important;
+/* .menu-button > svg {
+  margin-bottom: 5px;
+} */
+
+.menu-button:disabled {
+  cursor: unset;
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-.accordion-content {
-  border-radius: var(--spacing-8);
-  /* color: var(--color-neutral-100); */
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-  padding: 0 0 var(--spacing-8) var(--spacing-16);
+.menu-button:hover {
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  transition: var(--transition-bg-cubic-bezier),
+    var(--transition-box-shadow-cubic-bezier);
 }
 
-/* .accordion__title {
-  border-radius: var(--spacing-8);
-  background-color: var(--color-neutral-700);
-  color: var(--color-neutral-100);
-  justify-content: flex-end;
-  gap: 8px;
-  padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);
+.menu-button-dropdown {
+  background-color: var(--color-dark-bright) !important;
+  padding-right: var(--spacing-16) !important;
 }
 
-.accordion__menu {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-  padding: 0 0 var(--spacing-8) var(--spacing-16);
-} */
-/* 
-.accordion__child {
-  border-radius: var(--spacing-8);
-  background-color: var(--color-neutral-200);
-  color: var(--color-neutral-900);
-  font-size: var(--font-size-14);
+.menu-button-nested {
+  background-color: var(--color-dark-brightest);
+  margin-left: var(--spacing-16);
+  padding-right: var(--spacing-40);
 }
 
-.accordion__child--active {
-  background-color: var(--color-neutral-500);
-} */
-/* 
-.accordion__check {
-  color: var(--color-neutral-500);
-  margin-right: calc(var(--spacing-24) * -1);
-  position: absolute;
-  right: 0;
-} */
+.menu-button-subnested {
+  background-color: var(--color-dark-brightest);
+  margin-left: var(--spacing-32);
+  padding-right: var(--spacing-40);
+}
+
+.menu-button-nested:hover {
+  background-color: var(--color-primary-dark) !important;
+}
+
+.menu-button-subnested:hover {
+  background-color: var(--color-primary-dark) !important;
+}
+
+.menu-button-is-link:hover {
+  background-color: var(--color-primary-dark) !important;
+  transition: var(--transition-bg-cubic-bezier);
+}
+
+.menu-button-dropdown:hover {
+  background-color: var(--color-primary-darker) !important;
+}
+
+.menu-button-is-selected {
+  background-color: var(--color-primary-darker);
+}
 
 .button {
   align-items: center;
   border-radius: var(--spacing-32);
   border: none;
+  color: inherit;
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -223,10 +333,9 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   font-size: var(--font-size-16);
 }
 
-/* 
-.button--active {
-  background-color: var(--color-neutral-500) !important;
-} */
+[data-theme="dark"] .button {
+  color: var(--color-light-brighter);
+}
 
 .button:disabled {
   cursor: unset;
@@ -235,50 +344,57 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .button:hover {
-  background-color: var(--color-primary);
-  transition: var(--transition-bg-cubic-bezier);
+  background-color: var(--color-primary-dark);
+  border: 3px solid var(--color-primary-dark);
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  transition: var(--transition-bg-cubic-bezier),
+    var(--transition-box-shadow-cubic-bezier);
 }
 
 .button__link {
   background-color: unset !important;
-  color: var(--color-neutral-100);
-  text-decoration: underline transparent;
+  color: var(--color-primary-base) !important;
+  text-decoration: underline 1px var(--color-primary-base);
+  text-underline-offset: var(--spacing-4);
+}
+
+[data-theme="light"] .button__link {
+  color: var(--color-primary-darker) !important;
+  text-decoration: underline 1px var(--color-primary-darker);
 }
 
 .button__link:hover {
-  color: var(--color-primary);
-  text-decoration: underline 0.1rem var(--color-primary);
-  text-underline-offset: var(--spacing-8);
+  border: unset;
+  box-shadow: unset;
+  color: var(--color-primary-dark) !important;
+  text-decoration: underline 2px var(--color-primary-base);
+  text-underline-offset: calc(var(--spacing-8) * 0.75);
   transition: var(--transition-color-cubic-bezier),
-    var(--transition-text-decoration-cubic-bezier);
+    var(--transition-text-underline-offset-cubic-bezier);
 }
 
 .button__primary {
-  background-color: var(--color-secondary);
-  border: 3px solid var(--color-primary);
-}
-
-.button__primary:hover {
-  box-shadow: 0 4px 4px 0 var(--color-neutral-400);
-  transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic-bezier);
+  background-color: var(--color-primary-bright);
+  border: 3px solid var(--color-primary-base);
 }
 
 .button__secondary {
-  background-color: var(--color-neutral-900);
-  border: 3px solid var(--color-primary);
-  color: var(--color-neutral-100);
+  background-color: var(--color-main-background);
+  border: 3px solid var(--color-primary-base);
+  border-radius: var(--spacing-32);
 }
 
 .button__secondary:hover {
-  background-color: var(--color-primary);
+  box-shadow: unset;
+  border: 3px solid var(--color-primary-base);
 }
 
 .button__icon {
-  background-color: unset;
+  background-color: var(--color-primary-bright);
 }
 
 .button__icon:hover {
-  box-shadow: unset;
+  border: unset;
 }
 
 .button__small {
@@ -293,6 +409,15 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   padding: var(--spacing-16);
 }
 
+.button__link > a {
+  text-decoration: inherit;
+  color: inherit;
+}
+
+.button__icon.button__medium {
+  padding: var(--spacing-8) var(--spacing-12);
+}
+
 .form {
   align-items: center;
   display: flex;
@@ -325,15 +450,23 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 
 .input {
   box-sizing: border-box;
-  background-color: var(--color-white);
   border-radius: var(--spacing-8);
-  border: 2px solid var(--color-primary);
-  color: var(--color-black);
+  border: 2px solid var(--color-primary-bright);
   padding: var(--spacing-16) var(--spacing-24);
   font-size: var(--font-size-16);
   width: 100%;
 }
 
+[data-theme="dark"] .input {
+  background-color: var(--color-dark-bright);
+  color: var(--color-light-bright);
+}
+
+[data-theme="light"] .input {
+  background-color: var(--color-light-bright);
+  color: var(--color-dark-bright);
+}
+
 .input__header {
   align-items: center;
   display: flex;
@@ -351,7 +484,6 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .input__icon {
-  /* padding-top: var(--spacing-8); */
   padding: var(--spacing-16) var(--spacing-16);
   position: absolute;
 }
@@ -365,16 +497,20 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .input:enabled:hover {
-  box-shadow: 2px 6px 4px 0 var(--color-neutral-400);
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
   transition: var(--transition-box-shadow-cubic-bezier);
 }
 
 .input:focus {
-  box-shadow: 2px 6px 4px 0 var(--color-neutral-400);
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
   transition: var(--transition-box-shadow-cubic-bezier);
   outline: none;
 }
 
+.input::placeholder {
+  color: color-mix(in srgb, var(--color-light-base) 0.5, transparent);
+}
+
 .input:disabled {
   opacity: 0.5;
 }
@@ -387,6 +523,20 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   border: 3px solid var(--color-danger);
   outline: none;
 }
+
+.custom-class-name {
+  background-color: cyan;
+  width: 94.5%;
+  padding: var(--spacing-16) var(--spacing-24);
+  font-size: var(--font-size-16);
+  border-radius: var(--spacing-8);
+}
+
+.special-label-class {
+  color: violet;
+  text-decoration: overline;
+}
+
 .textarea {
   margin-bottom: var(--spacing-8);
   position: relative;
@@ -403,55 +553,75 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 .textarea__header--error {
   font-size: 12px;
   color: var(--color-danger);
-
 }
 
 .textarea__input {
-  background-color: var(--color-white);
   box-sizing: border-box;
   border-radius: var(--spacing-8);
-  border: 2px solid var(--color-primary);
+  border: 2px solid var(--color-primary-bright);
   cursor: text;
-  color: var(--color-black);
   outline: none;
   padding: var(--spacing-8) var(--spacing-16);
   resize: vertical;
   width: 100%;
 }
 
+[data-theme="dark"] .textarea__input {
+  background-color: var(--color-dark-bright);
+  color: var(--color-light-bright);
+}
+
+[data-theme="light"] .textarea__input {
+  background-color: var(--color-light-bright);
+  color: var(--color-dark-bright);
+}
+
+[data-theme="dark"] .textarea__input {
+  background-color: var(--color-dark-bright);
+  color: var(--color-light-bright);
+}
+
+[data-theme="light"] .textarea__input {
+  background-color: var(--color-light-bright);
+  color: var(--color-dark-bright);
+}
+
 .textarea__input--error {
   border: 3px solid var(--color-danger);
 }
 
 .textarea__input:enabled:hover {
-  box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
   transition: var(--transition-box-shadow-cubic-bezier);
 }
 
+.textarea__input:focus {
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  transition: var(--transition-box-shadow-cubic-bezier);
+  outline: none;
+}
+
 .textarea__input:disabled {
   opacity: 0.5;
 }
 
-.textarea__button {
-  background: var(--color-primary);
-  border: 2px solid var(--color-secondary);
-  box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.25);
+.textarea__button.button {
   border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
   bottom: 0;
   cursor: pointer;
   left: 0;
-  padding-bottom: -20px;
+  padding: var(--spacing-4) var(--spacing-8);
   position: absolute;
   width: 100%;
 }
 
 .textarea__button--error {
   background: var(--color-danger) !important;
-  border: 3px solid var(--color-danger);
+  border: 3px solid var(--color-danger) !important;
 }
 
 .textarea__button > svg {
-  color: var(--color-neutral-100);
+  color: var(--color-main-color);
 }
 
 .textarea__button:disabled {
@@ -460,14 +630,19 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   pointer-events: none;
 }
 
-.textarea__button:enabled:hover {
-  background: var(--color-secondary);
-  color: var(--color-neutral-100);
+.textarea__button--show {
+  background-color: var(--color-primary-dark) !important;
+  border: 2px solid var(--color-primary-dark) !important;
 }
 
-.textarea__button--show {
-  background: var(--color-primary-700);
-  color: var(--color-neutral-100);
+.custom-label {
+  color: red;
+  text-decoration: line-through;
+}
+
+.textarea__button--show.textarea__button--error {
+  background: var(--color-danger) !important;
+  border: 3px solid var(--color-danger) !important;
 }
 
 .select-group {
@@ -480,23 +655,20 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 
 .select {
   box-sizing: border-box;
-  background-color: var(--color-white);
   border-radius: var(--spacing-8);
-  border: 2px solid var(--color-primary);
-  color: var(--color-black);
+  border: 2px solid var(--color-primary-bright);
   padding: var(--spacing-16) var(--spacing-24);
   font-size: var(--font-size-16);
   width: 100%;
 }
 
-/* .select:enabled:hover {
-  border: 3px solid var(--color-primary-700);
+.select--focus {
+  border-radius:  var(--spacing-8) var(--spacing-8)   0 0 !important;
 }
 
 .select:focus {
-  border: 3px solid var(--color-primary-700);
-  outline: none;
-} */
+  border-radius: var(--spacing-8) var(--spacing-8) 0 0;
+}
 
 .select:disabled {
   opacity: 0.5;
@@ -507,14 +679,22 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .select__arrow-button.button {
+  background-color: unset;
   border-radius: 0 var(--spacing-8) var(--spacing-8) 0;
   padding: 15px var(--spacing-24);
 }
 
+.select__arrow-button.button:hover {
+  background-color: var(--color-primary-dark);
+}
+
+.select__arrow-button--open.button {
+  border-bottom-right-radius:  0 !important;
+}
+
 .select__box {
-  background-color: var(--color-white);
-  border-radius: var(--spacing-8);
-  border: 2px solid var(--color-primary);
+  border-radius: 0 0 var(--spacing-8) var(--spacing-8);
+  border: 2px solid var(--color-primary-bright);
   box-sizing: border-box;
   max-height: var(--size-m);
   overflow: scroll;
@@ -522,21 +702,29 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   top: 100%;
   width: 100%;
   z-index: 2;
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+
+.select__box::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
 }
 
 .select__option.button {
-  text-align: left;
   border: none;
   border-radius: 0;
+  text-align: left;
   width: 100%;
 }
 
+.select__option.button:hover {
+  border: unset;
+}
+
 .select__option.button:last-child {
   border-radius: 0 0 var(--spacing-8) var(--spacing-8);
 }
-.select__option.button:first-child {
-  border-radius: var(--spacing-8) var(--spacing-8) 0 0;
-}
+
 .select--error {
   border: 3px solid var(--color-danger);
 }
@@ -546,15 +734,24 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   outline: none;
 }
 
+.custom-class-name-group {
+  background-color: blue;
+  padding: var(--spacing-8);
+}
+
 .loading {
   align-items: center;
   display: flex;
   flex-direction: column;
   height: 100%;
-  justify-content: center;;
+  justify-content: center;
   position: relative;
 }
 
+.loading-message {
+  color: white;
+}
+
 .modal-overlay {
   background: rgba(0, 0, 0, 0.3);
   bottom: 0;
@@ -591,48 +788,154 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
-  /* padding: 0 var(--spacing-16); */
+  padding: 0 var(--spacing-16);
 }
 
 .modal__footer {
   padding-bottom: var(--spacing-16);
 }
+
+.map {
+  position: relative;
+  height: 100%;
+}
+
+.map__attribution {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-4);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+
+.map__attribution a {
+  font-size: var(--font-size-12);
+  padding: 0 var(--spacing-8) 0 0;
+}
+
+.map__attribution a:hover {
+  text-underline-offset: var(--spacing-4);
+}
+
+.map__button.button {
+  padding: var(--spacing-8) !important;
+}
+.map__mapbox-error {
+  color: var(--color-danger);
+}
+
+.map__popup {
+  background-color: var(--color-main-color);
+  border-radius: var(--spacing-8);
+  color: var(--color-main-background);
+  padding: var(--spacing-4);
+  position: absolute;
+}
+
+.map__popup-content {
+  border: 1px solid var(--color-main-background);
+  border-radius: var(--spacing-8);
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-8);
+  padding: var(--spacing-8);
+}
+
+.map__popup-list {
+  border-radius: var(--spacing-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.map__popup-list > h5 {
+  margin: unset;
+}
+
+/* .map__tip {
+  display: flex;
+  align-self: center;
+  border: 10px solid transparent;
+  border-bottom-color: var(--color-main-color) !important;
+  border-top: none;
+  flex-direction: column;
+  height: 0;
+  width: 0;
+  z-index: 1;
+} */
+
+.mapboxgl-popup-tip {
+  border-bottom-color: var(--color-main-color) !important;
+}
+
+.mapboxgl-popup-content {
+  background-color: var(--color-main-color) !important;
+  border: 1px solid var(--color-main-background) !important;
+  border-radius: var(--spacing-8) !important;
+  color: var(--color-main-background) !important;
+  display: flex !important;
+  flex-direction: row !important;
+  gap: var(--spacing-8) !important;
+  padding: var(--spacing-8) !important;
+}
+
+.mapboxgl-popup-close-button {
+  border-radius: var(--spacing-32) !important;
+  background-color: var(--color-primary-dark) !important;
+  top: -16px !important;
+  right: -16px !important;
+}
+
+.mapboxgl-popup-close-button:hover {
+  background-color: var(--color-primary-dark);
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  transition: var(--transition-bg-cubic-bezier),
+    var(--transition-box-shadow-cubic-bezier);
+}
+
 .control {
+  color: var(--color-main-background);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-16);
+  gap: var(--spacing-8);
   position: absolute;
-  margin: var(--spacing-4);
+  /* margin: var(--spacing-4); */
 }
 
 .control--top-left {
+  padding: var(--spacing-8) 0 0 var(--spacing-8);
   top: 0;
 }
 
 .control--top-right {
   align-items: end;
+  padding: var(--spacing-8) var(--spacing-8) 0 0;
   right: 0;
   top: 0;
 }
 
 .control--bottom-left {
   bottom: 0;
+  padding: 0 0 var(--spacing-32) var(--spacing-8);
 }
 
 .control--bottom-right {
   align-items: end;
   bottom: 0;
+  padding: 0 var(--spacing-8) var(--spacing-32) 0;
   right: 0;
 }
 
 .control--top-center {
   left: 40%;
+  padding-top: var(--spacing-8);
   top: 0;
 }
 
 .control--center-left {
-  position: absolute;
   left: 0;
+  padding-left: var(--spacing-8);
   top: 40%;
 }
 
@@ -642,6 +945,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 }
 
 .control--center-right {
+  padding-right: var(--spacing-8);
   right: 0;
   top: 40%;
 }
@@ -649,25 +953,6 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
 .control--bottom-center {
   bottom: 0;
   left: 40%;
+  padding-bottom: var(--spacing-8);
   top: auto;
 }
-
-.map {
-    position: relative;
-    height: 100%;
-}
-
-.map__attribution {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-4);
-}
-
-.map__attribution a {
-    font-size: var(--font-size-12);
-    padding: 0;
-}
-
-.map__attribution a:hover {
-    text-underline-offset: var(--spacing-4);
-}