Show cross to active Locations continent and change buttons behaviours

Active filtered continent stays pink instead of using opacity on the other ones

src/style/atoms/_button.scss

@@ -21,7 +21,6 @@
     // Icon
     :global(img), :global(svg) {
         display: block;
-        margin-right: 12px;
         color: $color-gray;
         transition: color 0.3s;
     }
@@ -135,4 +134,19 @@
             background: darken($color-button, 2.5);
         }
     }
+
+
+    /*
+    ** Icons variants
+    */
+    &.has-icon-before {
+        :global(img), :global(svg) {
+            margin-right: 12px;
+        }
+    }
+    &.has-icon-after {
+        :global(img), :global(svg) {
+            margin-left: 12px;
+        }
+    }
 }

src/style/organisms/_locations.scss

@@ -28,25 +28,44 @@
         justify-content: center;
         pointer-events: none;
 
-        &:hover {
-            li {
-                opacity: 0.4;
-            }
-        }
         li {
             display: block;
             margin: 0 8px;
             pointer-events: auto;
             transition: opacity 0.6s var(--ease-quart);
+            border-radius: 100vh;
 
-            &:hover {
-                opacity: 1;
+            :global(svg) {
+                width: 0;
+                height: 0;
+                opacity: 0;
+                transform: rotate(45deg) translateZ(0);
+                transition-duration: 0.6s;
+                transition-property: width, height, opacity, transform, color, margin;
+                transition-timing-function: var(--ease-quart);
+                color: $color-text;
+            }
+            &:not(.is-active) svg {
+                margin: 0;
             }
-        }
 
-        // Disabled button
-        .is-disabled {
-            opacity: 0.4;
+            // Active button
+            &.is-active {
+                :global(.button) {
+                    background: $color-secondary;
+
+                    &, & > :global(svg) {
+                        color: #fff;
+                    }
+                }
+
+                svg {
+                    width: 12px;
+                    height: 12px;
+                    opacity: 1;
+                    transform: rotate(0deg) translateZ(0);
+                }
+            }
         }
     }