#toast {
  position: fixed;
  z-index: 9999;
  display: flex;
  align-items: center;
  left: 50%;
  top: -100%;
  transform: translateX(-50%);
  max-width: 300px ;
  width: 100% ;
  padding: var(--space-xs);
  height: fit-content;
  transition: top 0.5s ease;
}
.toastContainer {
  width: 100%;
  text-align: center;
}
#toast .card {
    display: flex;
  justify-content: center;   
  align-items: center;   
  background: var(--bg-primary);
  margin: 0;
  min-height: 40px;
  width: 100%;
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
}
#toast.slideIn {
  top: 30px;
}
#toast.error .card {
  border: 0.5px solid var(--danger);
}
.error {
  color: var(--danger);
}
#toast.success .card {
  border: 1px solid var(--success);
}
.success {
  color: var(--success);
}