Suspend notification fading when mouse is over any notification

src/components/DefaultNotification.svelte

@@ -99,6 +99,8 @@
     aria-live="polite"
     in:fade
     out:fade
+    on:mouseenter
+    on:mouseleave
   >
     <div class={getClass('content')}>
       <slot>{text}</slot>

src/components/Notification.svelte

@@ -6,6 +6,7 @@
   export let item;
   export let notification = {};
   export let withoutStyles = false;
+  export let fadeHalted;
 
   const { removeNotification } = getNotificationsContext();
   const {
@@ -17,18 +18,52 @@
 
   let timeout = null;
 
+  let expirationTime = null;
+  let leftTime = null;
+  let running = false;
+
+  $ : {
+    if(fadeHalted)
+      haltFade()
+    else
+      resumeFade()
+  }
+
+  const haltFade = () => {
+    if(removeAfter && timeout && running) {
+      running = false;
+      leftTime = expirationTime - Date.now();
+      clearTimeout(timeout);
+    }
+  };
+
+  const resumeFade = () => {
+    if(removeAfter && timeout && !running) {
+      expirationTime = new Date(Date.now() + leftTime);
+      running = true;
+      timeout = setTimeout(removeNotificationHandler, leftTime);
+    }
+  };
+
   if (removeAfter) {
+    expirationTime = new Date(Date.now() + removeAfter);
+    running = true;
     timeout = setTimeout(removeNotificationHandler, removeAfter);
   }
 
   onDestroy(() => {
-    if (removeAfter && timeout) clearTimeout(timeout);
+    if (removeAfter && timeout) {
+      clearTimeout(timeout);
+      fadeHalted = false;
+    } 
   });
 </script>
 
 <svelte:component
   this={item}
   {notification}
   {withoutStyles}
+  on:mouseenter={() => fadeHalted = true}
+  on:mouseleave={() => fadeHalted = false}
   onRemove={removeNotificationHandler}
 />

src/components/Notifications.svelte

@@ -55,6 +55,8 @@
   export let withoutStyles = false;
   export let zIndex = null;
 
+  let fadeHalted = false;
+
   const getClass = (position = '') => {
     const defaultPositionClass = ` default-position-style-${position}`;
 
@@ -76,6 +78,7 @@
           <Notification
             {notification}
             {withoutStyles}
+            bind:fadeHalted
             item={item || DefaultNotification}
           />
         {/if}