- CSS for modal dialog

- User can click outside modal dialog to close it

backend/scss/toast.scss

@@ -1,4 +1,5 @@
 @use 'constants' as consts;
+@use 'mixins';
 
 #toasts {
     position: fixed;
@@ -11,18 +12,11 @@
     flex-direction: column;
 
     .toast {
-        // visibility: hidden;
         display: none;
         width: fit-content;
         align-self: center;
 
-        border: 0.1em solid consts.$color-3;
-        border-radius: 0.5em;
-        background-color: consts.$color-2;
-
-        text-align: center;
-        padding: calc(2 * consts.$margin) calc(2 * consts.$margin);
-        box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
+        @include mixins.popup;
 
         margin: consts.$margin;
 
@@ -36,14 +30,6 @@
     }
 }
 
-// #toast.show {
-//     visibility: visible;
-//     animation:
-//         fadein 0.5s,
-//         fadeout 0.5s 9.5s;
-// animation-iteration-count: 1;
-// }
-
 @keyframes fadein {
     from {
         opacity: 0;