#toastBox {
  position: fixed; bottom: 20px; right: 0; padding: 20px;
  display:  flex; flex-direction: column;
  overflow: hidden; align-items: flex-end;
}

.initialToast { display: none; }

.toast {
  width:      300px; margin: 15px 0; padding: 15px 15px 15px 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); background: #fff;
  display:    flex; align-items: flex-start;
  position:   relative;
  transform:  translateX(100%);
  animation:  toast-appear 0.5s linear forwards;
}

@keyframes toast-appear {
  100% { transform: translateX(0); }
}

.toast .icon { width: 20px; margin: 3px 10px; }
.toast svg { width: 20px; height: 20px; }
.toast.success svg { fill: green; }
.toast.success .progress { background: green; }
.toast.info svg { fill: deepskyblue; }
.toast.info .progress { background: deepskyblue; }
.toast.warn svg { fill: orange; }
.toast.warn .progress { background: orange; }
.toast.error svg { fill: red; }
.toast.error .progress { background: red; }

.toast .progress {
  position: absolute; left: 0; bottom: 0;
  width:    100%; height: 5px;
}

@keyframes toast-progress {
  100% { width: 0; }
}