/* Over the content, bottom right, newest at the bottom. The auto-close timer is the delay of toast-leave, paused on
   hover and focus; app/javascript/toasts.js removes the toast when it ends (ADR 0028). */
.toasts {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 24rem;
  pointer-events: none;
}

.toast {
  --toast-rise: var(--space-8);

  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
  border-left: var(--border-width-strong) solid var(--success);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: var(--success-bg);
  color: var(--text-body);
  pointer-events: auto;
  animation:
    toast-enter var(--dur-base) var(--ease-out),
    toast-leave var(--dur-base) var(--ease-standard) 6s forwards;
}

.toast > .icon {
  color: var(--success);
}

.toast--danger {
  border-left-color: var(--danger);
  background: var(--danger-bg);
}

.toast--danger > .icon {
  color: var(--danger);
}

.toast:hover,
.toast:focus-within {
  animation-play-state: paused;
}

.toast--lasting {
  animation: toast-enter var(--dur-base) var(--ease-out);
}

.toast.toast--closing {
  animation: toast-leave-now var(--dur-fast) var(--ease-standard) forwards;
  animation-play-state: running;
}

.toast__body {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-12);
  min-width: 0;
  padding-block: var(--space-4);
}

.toast__message {
  margin: 0;
  font-weight: var(--fw-body-bold);
  overflow-wrap: break-word;
}

.toast__action :is(a, button) {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-link);
  font: inherit;
  font-weight: var(--fw-body-bold);
  text-decoration: underline;
  cursor: pointer;
}

.toast__close {
  display: grid;
  flex: none;
  place-items: center;
  align-self: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.toast__close:hover {
  color: var(--text-body);
}

@keyframes toast-enter {
  from {
    opacity: 0;
    translate: 0 var(--toast-rise);
  }
}

@keyframes toast-leave {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes toast-leave-now {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (max-width: 40rem) {
  .toasts {
    right: var(--space-16);
    bottom: var(--space-16);
    left: var(--space-16);
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    --toast-rise: 0;
  }
}