/* Position containers for alerts */
.alert-container {
  position: fixed;
  z-index: 1055;
  width: auto;
  max-width: 400px;
  margin: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.top-right {
  top: 1rem;
  right: 1rem;
}
.top-left {
  top: 1rem;
  left: 1rem;
}
.bottom-right {
  bottom: 1rem;
  right: 1rem;
}
.bottom-left {
  bottom: 1rem;
  left: 1rem;
}

/* Animation keyframes */
@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.animate-in {
  animation: slideFadeIn 0.4s ease forwards;
}

.animate-out {
  animation: slideFadeOut 0.4s ease forwards;
}

.alert-icon {
  margin-right: 0.5rem;
  vertical-align: -0.2em;
}