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/atoms/Button.svelte

@@ -12,12 +12,14 @@
     export let size: string = undefined
     export let effect: string = 'link-3d'
     export let disabled: boolean = undefined
+    export let slotPosition: string = 'before'
 
     const className = 'button'
     const classes = [
         className,
         effect ? effect : undefined,
         ...[color, size].map(variant => variant && `${className}--${variant}`),
+        $$slots ? `has-icon-${slotPosition}` : undefined,
         $$props.class
     ].join(' ').trim()
 
@@ -30,8 +32,13 @@
 
 {#if tag === 'button'}
     <button class={classes} tabindex="0" {disabled} on:click>
-        <slot />
+        {#if slotPosition === 'before'}
+            <slot />
+        {/if}
         <SplitText {text} clone={true} />
+        {#if slotPosition === 'after'}
+            <slot />
+        {/if}
     </button>
 {:else if tag === 'a'}
     <a
@@ -43,7 +50,12 @@
         tabindex="0"
         on:click
     >
-        <slot />
+        {#if slotPosition === 'before'}
+            <slot />
+        {/if}
         <SplitText {text} clone={true} />
+        {#if slotPosition === 'after'}
+            <slot />
+        {/if}
     </a>
 {/if}

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>