Show cross to active Locations continent and change buttons behaviours

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

src/components/organisms/Locations.svelte

@@ -6,9 +6,10 @@
     import { getContext } from 'svelte'
     import { flip } from 'svelte/animate'
     import { quartOut } from 'svelte/easing'
+    import { reveal, fly } from '$animations/index'
     import { send, receive } from '$animations/crossfade'
     import { throttle } from '$utils/functions'
-    import { reveal, fly } from '$animations/index'
+    import { sendEvent } from '$utils/analytics'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Location from '$components/molecules/Location.svelte'
@@ -36,7 +37,7 @@
      */
     const filterLocation = throttle((continent: string) => {
         currentContinent = continent !== currentContinent ? continent : null
-    }, 700)
+    }, 600)
 </script>
 
 <div class="browse" id="locations">
@@ -46,11 +47,20 @@
 
     <ul class="browse__continents">
         {#each continents as { name, slug }}
-            <li class:is-disabled={currentContinent && currentContinent !== slug}>
+            <li class:is-active={currentContinent === slug}>
                 <Button
                     tag="button" text={name} size="small"
-                    on:click={() => filterLocation(slug)}
-                />
+                    slotPosition="after"
+                    class={'is-disabled'}
+                    on:click={() => {
+                        filterLocation(slug)
+                        sendEvent({ action: 'filterContinent' })
+                    }}
+                >
+                    <svg width="12" height="12">
+                        <use xlink:href="#cross" />
+                    </svg>
+                </Button>
             </li>
         {/each}
     </ul>