Stacking toasts

<button class="toast-trigger" type="button">Show a toast</button>
<ol class="toasts" aria-live="polite"></ol>

.toast-trigger {
  border: 0;
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 12px;
  font: 600 15px system-ui, sans-serif;
  color: #fff;
  background: var(--brand);
}

/* The stack, pinned to the bottom-right corner. */
.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(320px, calc(100% - 32px));
}

.toast {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 12px 30px -12px rgba(0, 0, 0, 0.35);
  animation: toastIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast.leaving { animation: toastOut 0.3s ease forwards; }
.toast i { width: 8px; height: 8px; border-radius: 50%; background: #12a150; flex: none; }

@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px); } }

// Toasts: small messages that appear, wait a few seconds, then leave.
// Hovering pauses the countdown; clicking or tapping dismisses right away.

const toastList = document.querySelector('.toasts');
const defaultDuration = 3000; // ms a toast stays on screen
let savedCount = 0;

function showToast(message, duration = defaultDuration) {
  const toast = document.createElement('li');
  toast.className = 'toast';
  toast.innerHTML = '<i></i><span></span>';
  toast.querySelector('span').textContent = message; // textContent, so messages can't inject HTML
  toastList.append(toast);

  let timeLeft = duration;
  let countdownStartedAt = Date.now();
  let countdown;

  function dismiss() {
    toast.classList.add('leaving');
    toast.addEventListener('animationend', () => toast.remove(), { once: true });
  }

  function startCountdown() {
    countdownStartedAt = Date.now();
    countdown = setTimeout(dismiss, timeLeft);
  }

  function pauseCountdown() {
    clearTimeout(countdown);
    timeLeft -= Date.now() - countdownStartedAt; // keep the remaining time, not a fresh one
  }

  toast.addEventListener('pointerenter', pauseCountdown);
  toast.addEventListener('pointerleave', startCountdown);
  toast.addEventListener('click', dismiss); // works for tap too
  startCountdown();
}

document.querySelector('.toast-trigger').addEventListener('click', () => {
  savedCount += 1;
  showToast(`Saved draft #${savedCount}`);
});