chore: add a back to top link

1 files changed, 73 insertions, 0 deletions

diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
index b5d098d..debddfb 100644
--- a/src/components/Footer/Footer.module.scss
+++ b/src/components/Footer/Footer.module.scss
@@ -1,3 +1,5 @@
+@use "@styles/abstracts/functions" as fun;
+
 .wrapper {
   display: flex;
   flex-flow: row wrap;
@@ -6,3 +8,74 @@
   gap: var(--spacing-xs);
   padding: var(--spacing-md) 0 calc(var(--toolbar-size) + var(--spacing-md));
 }
+
+.back-to-top {
+  --button-size: #{fun.convert-px(55)};
+
+  position: fixed;
+  bottom: calc(var(--toolbar-size) + var(--spacing-md));
+  right: var(--spacing-md);
+  transition: all 0.4s ease-in 0s;
+
+  &--hidden {
+    opacity: 0;
+    transform: translateY(calc(var(--button-size) + var(--spacing-md)));
+  }
+
+  &--visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  a {
+    display: flex;
+    place-content: center;
+    padding: 0;
+    width: var(--button-size);
+    height: var(--button-size);
+
+    svg {
+      width: 100%;
+      padding: var(--spacing-2xs);
+    }
+
+    :global {
+      .arrow-head {
+        transform: translateY(12px) translateX(-5px) scale(1.5);
+        transition: all 0.6s ease-in-out 0s;
+      }
+
+      .arrow-bar {
+        opacity: 0;
+        transform: translateY(12px) translateX(5px) scale(0.5);
+        transition: transform 0.6s ease-in-out 0s, opacity 0.7s ease-in-out 0s;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      :global {
+        .arrow-head {
+          transform: translateY(0) translateX(0) scale(1);
+        }
+
+        .arrow-bar {
+          opacity: 1;
+          transform: translateY(0) translateX(0) scale(1);
+        }
+      }
+
+      svg {
+        :global {
+          animation: pulse 1.2s ease-in-out 0.6s infinite;
+        }
+      }
+    }
+
+    &:active {
+      svg {
+        animation-play-state: paused;
+      }
+    }
+  }
+}