🔥 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/style/atoms/_button.scss

@@ -19,7 +19,7 @@
     }
 
     // Icon
-    img, svg {
+    :global(img), :global(svg) {
         display: block;
         margin-right: 12px;
         color: $color-gray;
@@ -30,11 +30,11 @@
     &:not([disabled]):hover {
         background: $color-secondary;
 
-        svg {
+        :global(svg) {
             color: #fff;
         }
     }
-    .text-split__line {
+    :global(.text-split__line) {
         &:last-child {
             --offset-y: 65%;
             color: #fff;
@@ -95,7 +95,7 @@
             color: #fff;
             background: $color-secondary;
         }
-        .text-split__line {
+        :global(.text-split__line) {
             &:last-child {
                 color: #fff;
             }
@@ -126,7 +126,7 @@
         }
 
         // Hover
-        .text-split__line {
+        :global(.text-split__line) {
             &:last-child {
                 color: $color-primary-tertiary20;
             }