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>
+        {#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
     >
+        {#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>

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 {
+            :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;
+            }
+
+            // 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);
                 }
             }
-
-        // Disabled button
-        .is-disabled {
-            opacity: 0.4;
         }
     }