Handle pointer-events better

Author: zerodevx

src/SvelteToast.svelte

@@ -23,15 +23,16 @@ const getCss = theme => Object.keys(theme).reduce((a, c) => `${a}${c}:${theme[c]
 
 <style>
 ul {
+  top: var(--toastContainerTop,1.5rem);
+  right: var(--toastContainerRight,2rem);
+  bottom: var(--toastContainerBottom,auto);
+  left: var(--toastContainerLeft,auto);
   position: fixed;
   margin: 0;
   padding: 0;
   list-style-type: none;
+  pointer-events: none;
   z-index: 9999;
-  top: var(--toastContainerTop,1.5rem);
-  right: var(--toastContainerRight,2rem);
-  bottom: var(--toastContainerBottom,auto);
-  left: var(--toastContainerLeft,auto);
 }
 </style>
 

src/ToastItem.svelte

@@ -40,6 +40,9 @@ $: if (prevProgress !== item.progress) {
   padding: var(--toastMsgPadding,0.75rem 0.5rem);
   flex: 1 1 0%;
 }
+._toastMsg :global(a) {
+  pointer-events: auto;
+}
 ._toastBtn {
   width: 2rem;
   height: 100%;