Unwanted ghost click through the toast

[adrisanchu]

Explanation

By default, the toast is not selectable and you can click through (which is the desired effect in most cases). However, when there are buttons or any other clickable element underneath the toast, a user click can lead to unwanted events being fired.

Proposed solution

In SvelteToast.svelte, add a new CSS variable allowing to control pointer-events property, keeping current behavior as default.

<style>
._toastContainer {
  /* rest of the props... */
  /* pointer-events: none; */
  pointer-events: var(--toastContainerPointerEvents, none);
}
</style>

pointer-events: auto; will avoid this "ghost effect". Plus, it will allow to select the text within the toast with the mouse (which can be useful for copy/pasting!)