refactor: toast notification style

public/styles/components/toast.css

@@ -5,73 +5,70 @@
   right: 20px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
   z-index: 9999;
   pointer-events: none;
 }
 
 /* Toast */
 .toast {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  background-color: rgba(50, 50, 50, 0.9);
-  border-radius: 6px;
-  color: #ffffff;
-  font-size: 0.9rem;
-  max-width: 220px;
-  min-width: 100px;
-  animation: slideIn 0.25s ease-out;
+  gap: 12px;
+  padding: 14px 16px;
+  background-color: rgba(30, 30, 30, 0.9);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  color: #f3f4f6;
+  font-family: inherit;
+  font-size: 0.875rem;
+  max-width: 320px;
+  min-width: 220px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
+  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   pointer-events: auto;
-  backdrop-filter: blur(8px);
-}
-
-.toast.success {
-  background-color: rgba(40, 167, 69, 0.15);
-}
-
-.toast.error {
-  background-color: rgba(220, 53, 69, 0.15);
-}
-
-.toast.warning {
-  background-color: rgba(255, 193, 7, 0.15);
-}
-
-.toast.info {
-  background-color: rgba(23, 162, 184, 0.15);
+  overflow: hidden;
 }
 
 /* Toast Icon */
 .toast-icon {
   flex-shrink: 0;
-  font-size: 18px;
+  font-size: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.toast-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
 .toast.success .toast-icon {
-  color: #28a745;
+  color: #22c55e;
 }
 
 .toast.error .toast-icon {
-  color: #dc3545;
+  color: #ef4444;
 }
 
 .toast.warning .toast-icon {
-  color: #ffc107;
+  color: #f59e0b;
 }
 
 .toast.info .toast-icon {
-  color: #17a2b8;
+  color: #0ea5e9;
 }
 
 /* Toast Message */
 .toast-message {
   flex: 1;
-  font-weight: 500;
+  font-weight: 400;
+  line-height: 1.4;
+  word-break: break-word;
 }
 
 /* Toast Close Button */
@@ -79,58 +76,87 @@
   flex-shrink: 0;
   background: none;
   border: none;
-  color: currentColor;
+  color: #9ca3af;
   cursor: pointer;
-  font-size: 18px;
-  padding: 0;
+  font-size: 16px;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: 0.5;
-  transition: opacity 0.2s ease;
+  transition: background-color 0.15s ease, color 0.15s ease;
 }
 
 .toast-close:hover {
-  opacity: 1;
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+.toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.1);
+  animation: progress var(--toast-duration, 4000ms) linear forwards;
+}
+
+.toast.success .toast-progress {
+  background-color: #22c55e;
+}
+
+.toast.error .toast-progress {
+  background-color: #ef4444;
 }
 
 /* Animations */
 @keyframes slideIn {
   from {
-    transform: translateX(350px);
+    transform: translateY(-20px);
     opacity: 0;
   }
   to {
-    transform: translateX(0);
+    transform: translateY(0);
     opacity: 1;
   }
 }
 
 @keyframes slideOut {
   from {
-    transform: translateX(0);
+    transform: translateY(0);
     opacity: 1;
   }
   to {
-    transform: translateX(350px);
+    transform: translateY(-20px);
     opacity: 0;
   }
 }
 
-.toast.removing {
-  animation: slideOut 0.25s ease-out;
+@keyframes progress {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
+.toast.removing {
+  animation: slideOut 0.25s ease-in forwards;
 }
 
-/* Responsive */
 @media (max-width: 480px) {
   #toast-container {
-    bottom: 12px;
-    right: 12px;
-    left: 12px;
+    top: auto;
+    bottom: 16px;
+    right: 16px;
+    left: 16px;
   }
 
   .toast {
     max-width: none;
     min-width: auto;
   }
-}
+}