Add close button to Viewer

src/components/atoms/ButtonCircle.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    export let tag: string = 'button'
+    export let url: string = undefined
     export let color: string = undefined
     export let size: string = undefined
     export let type: string = undefined
@@ -14,7 +16,18 @@
     ].join(' ').trim()
 </script>
 
-<button {type} {form} class={classes} on:click disabled={disabled}>
+{#if tag === 'a'}
+    <a href={url} class={classes} on:click>
+        {#if clone}
+            {#each Array(2) as _}
+                <slot />
+            {/each}
+        {:else}
+            <slot />
+        {/if}
+    </a>
+{:else}
+    <button {type} {form} class={classes} disabled={disabled} on:click>
         {#if clone}
             {#each Array(2) as _}
                 <slot />
@@ -23,3 +36,4 @@
             <slot />
         {/if}
     </button>
+{/if}

src/routes/[country]/[location]/[photo].svelte

@@ -218,6 +218,17 @@
     <div class="container grid">
         <p class="viewer-photo__notice text-label">Tap for fullscreen</p>
 
+        <ButtonCircle
+            tag="a"
+            url="/{location.country.slug}/{location.slug}"
+            color="purple"
+            class="viewer-photo__close shadow-box-dark"
+        >
+            <svg width="12" height="12">
+                <use xlink:href="#cross">
+            </svg>
+        </ButtonCircle>
+
         <div class="viewer-photo__carousel">
             <div class="viewer-photo__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
                 {#each visiblePhotos as photo, index (photo.id)}

src/style/atoms/_button-circle.scss

@@ -102,6 +102,7 @@
 
     // Purple color
     &--purple {
+        color: #fff;
         background: $color-primary-tertiary20;
 
         &:hover {

src/style/pages/_viewer-photo.scss

@@ -393,4 +393,35 @@
             display: none;
         }
     }
+
+    // Close button
+    &__close {
+        position: fixed;
+        z-index: 2;
+        top: 16px;
+        right: calc(16px + 44px + 12px);
+
+        @include bp (md) {
+            top: 40px;
+            right: 40px;
+        }
+
+        svg {
+            max-width: 14px;
+            max-height: 14px;
+
+            @include bp (md) {
+                max-width: 20px;
+                max-height: 20px;
+            }
+        }
+
+        // Hover
+        &:hover {
+            svg {
+                transform: rotate3d(0, 0, 1, 90deg) !important;
+                transition-duration: 1.2s;
+            }
+        }
+    }
 }