/* ==========================================================================
   Notifications - Flash & Toast styles
   ========================================================================== */

/* ==========================================================================
   Flash Messages
   ========================================================================== */

.flash {
  padding: var(--space-xs) var(--space-md);
  border: var(--border);
  font-size: var(--font-size-sm);
  font-weight: 700;
  animation: slide-up-fade-in 0.3s ease-out;
}

.flash--notice {
  background-color: var(--color-primary);
  color: var(--color-ink);
}

.flash--alert {
  background-color: var(--color-danger);
  color: var(--color-canvas);

  & a {
    color: inherit;
    text-decoration: underline;

    &:hover {
      color: var(--color-ink);
    }
  }
}

.flash--alert.animate-shake {
  animation:
    slide-up-fade-in 0.3s ease-out,
    shake 0.5s ease-in-out 0.3s;
}

.flash--success {
  background-color: var(--color-success);
  color: var(--color-ink);
}

/* Flash container - fixed at bottom of screen */
.flashes {
  position: fixed;
  bottom: var(--space-md);
  left: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  z-index: 1000;
  max-width: 400px;
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */

.toast-container {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  z-index: 1001;
  max-width: 300px;
}

.toast {
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-success);
  border: var(--border-thick);
  box-shadow: var(--shadow-medium);
  font-weight: 700;
  transform: translateX(120%);
  opacity: 0;
  transition:
    transform 0.3s ease-out,
    opacity 0.3s ease-out;
}

.toast--visible {
  transform: translateX(0);
  opacity: 1;
}

.toast--positioned {
  white-space: nowrap;
  z-index: 1002;
}

.toast--positioned.toast--visible {
  transform: translate(-50%, -100%);
  opacity: 1;
}