Added translations switch button

src/assets/scss/_animations.scss

@@ -0,0 +1,17 @@
+// Animations on load
+@media screen and (prefers-reduced-motion: no-preference) {
+    .appear-from-top {
+        animation: fadeIn .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(-1rem);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}

src/assets/scss/_buttons.scss

@@ -78,4 +78,48 @@
     &.btn-shadow {
         box-shadow: rgba(0, 0, 0, 0.15) 0 .2rem .3rem;
     }
+}
+
+.btn-round {
+    display: grid;
+    place-items: center;
+    height: 45px;
+    aspect-ratio: 1;
+    background-color: var(--white);
+    border: 1px solid var(--slate-400);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+    border-radius: 100vmax;
+    pointer-events: all;
+    cursor: pointer;
+    outline: .2rem solid transparent;
+    transition-property: color, background-color, border-color, outline-color;
+    transition-duration: .15s;
+    transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+
+    svg {
+        width: 1.15em;
+        transition-property: fill;
+        transition-duration: .15s;
+        transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    }
+
+    &:hover,
+    &:focus-visible {
+        outline-color: color-mix(in srgb, var(--blue-500) 20%, transparent);
+        border-color: var(--blue-500);
+        
+        svg {
+            fill: var(--blue-500);
+        }
+    }
+
+    &.active {
+        color: var(--white);
+        background-color: var(--blue-500);
+        border-color: var(--blue-700);
+
+        svg {
+            fill: var(--white);
+        }
+    }
 }

src/assets/scss/_card.scss

@@ -3,9 +3,16 @@
     padding-inline: .75rem;
     border-radius: 8px;
     background-color: var(--white);
+    border: 1px solid var(--slate-100);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
     min-width: 15rem;
 
     .card-arrow {
         fill: var(--white);
     }
+
+    &.p-sm {
+        min-width: fit-content;
+        padding: .5rem .25rem;
+    }
 }

src/assets/scss/_map.scss

@@ -0,0 +1,3 @@
+// :root {
+//     --sidebar-size: 3rem;
+// }

src/assets/scss/theme.scss

@@ -4,8 +4,10 @@
 @use 'leaflet';
 
 @use 'forms';
+@use 'animations';
 @use 'buttons';
 @use 'card';
+@use 'map';
 
 :root {
     --white: #fff;