🔥 Huge style refactoring by using SvelteKit built-in style tag

It's been tricky but got there finally! Hello `:global`
- Avoid using one global CSS file containing everything
- Import the component SCSS file in a script tag from the component file to allow style scoping and including it only when used

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

@@ -1,3 +1,7 @@
+<style lang="scss">
+    @import "../../../style/pages/location";
+</style>
+
 <script lang="ts">
     import { navigating, page } from '$app/stores'
     import { onMount } from 'svelte'
@@ -14,6 +18,7 @@
     import Button from '$components/atoms/Button.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
     import House from '$components/molecules/House.svelte'
+    import Pagination from '$components/molecules/Pagination.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
     export let location: any
@@ -279,23 +284,19 @@
 
         <section class="location-page__next">
             <div class="container">
-                <div class="pagination" role="button"
-                    on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}
+                <Pagination
+                    ended={ended}
+                    current={currentPhotosAmount}
+                    total={totalPhotos}
+                    on:click={!ended && loadMorePhotos}
                     on:keydown={({ key, target }) => key === 'Enter' && target.click()}
-                    tabindex="0"
-                >
-                    <div class="pagination__progress">
-                        <span class="current">{currentPhotosAmount}</span>
-                        <span>/</span>
-                        <span class="total">{totalPhotos}</span>
-
-                        {#if !ended}
-                            <p class="pagination__more">See more photos</p>
-                        {:else}
-                            <p class="pagination__message">You've seen it all!</p>
-                        {/if}
-                    </div>
-                </div>
+            >
+                    {#if !ended}
+                        <p class="more">See more photos</p>
+                    {:else}
+                        <p class="message">You've seen it all!</p>
+                    {/if}
+                </Pagination>
 
                 {#if ended}
                     <NewsletterModule theme="light" />