Updated

frontend/assets/css/tailwind.css

@@ -120,16 +120,15 @@
     --breakpoint-xs: 480px;
 
     /* ANIMATIONS */
-<<<<<<< HEAD
     --animate-marquee: marquee 3s linear infinite;
     --animate-slide-down: slideDown 300ms ease-out;
     --animate-slide-up: slideUp 300ms ease-out;
     --animate-overlay-show: overlayShow 150ms ease-in;
     --animate-content-show: contentShow 150ms ease-in;
-=======
-    --animate-marquee: marquee 25s linear infinite;
-    --animate-marquee-reverse: marquee 25s linear infinite reverse;
->>>>>>> be4fa509843c81855f5ffc118150196c94a7b17b
+
+    --animate-toast-hide: toastHide 100ms ease-in;
+    --animate-toast-in: toastSlideIn 600ms cubic-bezier(0.16, 1, 0.3, 1);
+    --animate-toast-out: toastSlideOut 200ms ease-out;
 
     @keyframes marquee {
         to {
@@ -174,6 +173,33 @@
             transform: translate(-50%, -50%) scale(1);
         }
     }
+
+    @keyframes toastHide {
+        from { opacity: 1 }
+        to { opacity: 0 }
+    }
+
+    @keyframes toastSlideIn {
+        from {
+            opacity: 0;
+            transform: translateX(calc(100% + var(--viewport-padding)))
+        }
+        to {
+            opacity: 1;
+            transform: translateX(0)
+        }
+    }
+
+    @keyframes toastSlideOut {
+        from {
+            opacity: 1;
+            transform: translateX(var(--reka-toast-swipe-end-x))
+        }
+        to {
+            opacity: 0;
+            transform: translateX(calc(100% + var(--viewport-padding)))
+        }
+    }
 }
 
 /* CONTAINER */