feat: enhance accessibility and styling for form components including Checkbox, Dropdown, Radio, Slider, and Text

src/scss/_toast.scss

@@ -1,41 +1,98 @@
 @use 'variables' as *;
+@use 'mixins' as *;
 
-.Toastify__toast-body {
-  font-size: 16px !important;
-  padding: 15px 20px !important;
-}
-
-.Toastify__toast {
-  border-radius: 12px !important;
-  height: auto !important;
-  width: auto !important;
-  min-width: auto !important;
-  padding: 10px !important;
-}
-
-.Toastify__close-button {
-  align-self: center !important;
-  color: var(--modal-text) !important;
-}
-
-/* .Toastify__progress-bar--default {
-  height: 3px !important;
-  background: var(--modal-text) !important;
-  color: var(--modal-text) !important;
-} */
-
+// Toast container
 .Toastify__toast-container {
   width: auto !important;
+  padding: 16px !important;
 }
 
-.Toastify__toast--default {
-  @extend %basic;
+// Main toast styling with glassmorphism effect
+.Toastify__toast {
+  @include themed() {
+    background: t($background) !important;
+    color: t($color) !important;
+    box-shadow: t($boxShadow), 0 8px 32px rgb(0 0 0 / 20%) !important;
+  }
+
+  border-radius: $borderRadius !important;
+  -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
+  backdrop-filter: blur(15px) saturate(180%) !important;
+  padding: 16px 20px !important;
+  min-height: 64px !important;
+  width: auto !important;
+  min-width: 300px !important;
+  max-width: 500px !important;
+  font-family: inherit !important;
+  box-sizing: border-box !important;
+  transition: all 0.3s ease !important;
+
+  &:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 0 0 1px #484848, 0 12px 40px rgb(0 0 0 / 30%) !important;
+  }
 }
 
-.Toastify__toast--info {
-  @extend %basic;
+// Toast body
+.Toastify__toast-body {
+  padding: 0 !important;
+  font-size: 15px !important;
+  line-height: 1.5 !important;
+  margin: 0 !important;
+
+  @include themed() {
+    color: t($color) !important;
+  }
 }
 
-.Toastify__progress-bar--info {
-  background-color: gold !important;
+// Close button
+.Toastify__close-button {
+  @include themed() {
+    color: t($color) !important;
+    opacity: 0.6 !important;
+  }
+
+  align-self: center !important;
+  transition: all 0.2s ease !important;
+
+  &:hover {
+    opacity: 1 !important;
+  }
+}
+
+// Progress bar base styling
+.Toastify__progress-bar {
+  height: 4px !important;
+  border-radius: 0 0 $borderRadius $borderRadius !important;
+
+  &--default,
+  &--info {
+    @include themed() {
+      background: linear-gradient(90deg, t($link) 0%, #dd3b67 100%) !important;
+    }
+  }
+
+  &--success {
+    background: linear-gradient(90deg, rgb(46 213 115) 0%, rgb(26 188 156) 100%) !important;
+  }
+
+  &--warning {
+    background: linear-gradient(90deg, #ffb032 0%, #ff9500 100%) !important;
+  }
+
+  &--error {
+    background: linear-gradient(90deg, rgb(255 71 87) 0%, #dd3b67 100%) !important;
+  }
+}
+
+// Toast type variants - all use the base glassmorphism style
+.Toastify__toast--default,
+.Toastify__toast--info,
+.Toastify__toast--success,
+.Toastify__toast--warning,
+.Toastify__toast--error {
+  @include themed() {
+    background: t($background) !important;
+    color: t($color) !important;
+  }
 }