Added toast color

src/assets/scss/radix/_toast.scss

@@ -16,6 +16,7 @@
 }
 
 .toast-root {
+    position: relative;
     padding: 15px;
     display: grid;
     grid-template-areas: 'title action' 'description action';
@@ -32,6 +33,21 @@
         color: var(--green-700);
         border: 1px solid var(--green-700);
         background-color: color-mix(in srgb, var(--green-500) 17.5%, var(--white));
+
+        .toast-icon svg {
+            fill: var(--green-700);
+        }
+    }
+
+    &:has(.toast-icon) {
+        padding-left: 2.2rem;
+    }
+
+    .toast-icon {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: .66rem;
     }
 }
 .toast-root[data-state='open'] {

src/components/maps/overlay/ToastService.vue

@@ -35,10 +35,6 @@ function handleUpdate(id: string) {
     toasts.value.forEach((t, i) => {
         if (t.id === id) {
             t.open = false
-
-            setTimeout(() => {
-                toasts.value.splice(i, 1)
-            }, 5000)
         }
     })
 }
@@ -54,6 +50,10 @@ function handleUpdate(id: string) {
             v-bind="toast"
             @update:open="handleUpdate(toast.id)"
         >
+            <div v-if="toast.variant === 'success'" class="toast-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>
+            </div>
+
             <ToastTitle class="toast-title" v-if="toast.title">
                 {{ toast.title }}
             </ToastTitle>