@use "tokens" as *;

.toast-container {
  position: fixed;
  top: $space-4;
  right: $space-4;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: $space-2;
  max-width: 400px;
}

.toast-enter-active, .toast-leave-active { transition: all 0.3s ease; }
.toast-enter-from, .toast-leave-to { opacity: 0; transform: translateX(20px); }
.toast-move { transition: transform 0.3s ease; }