/* container */
.toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  z-index: 9999;
}

/* base */
.toast {
  min-width: 220px;
  max-width: 320px;
  padding: .75rem 1rem;
  border-radius: var(--border-radius);
  box-shadow: var(--card-box-shadow);
  background: var(--card-background-color);
  color: var(--color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: toast-in .2s ease;
}

/* variants */
.toast.success { border-left: 4px solid #2e7d32; }
.toast.error   { border-left: 4px solid #c62828; }
.toast.warning { border-left: 4px solid #ed6c02; }
.toast.info    { border-left: 4px solid #0288d1; }

/* exit */
.toast.hide { opacity: 0; transform: translateX(20px); transition: .2s; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}