/* Non-blocking messages and the decisions attached to them: import outcomes, the
   undo after an import, storage problems, the confirmation before clearing. */

/* A stack in the bottom-right corner rather than a band above the workspace.
   In the flow, every arriving message pushed the editors down and every expiry
   let them snap back, so the line being read moved under the reader.

   Anchored to the bottom and filled from the top, so the newest message sits
   above the ones already there and the stack settles downwards as the oldest
   expires. `pointer-events` is off on the container so the corner of the page
   underneath stays clickable between messages, and back on for the messages
   themselves, which carry buttons. */
.notices {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-small);
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-small);
  width: 100%;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--colour-border);
  border-left-width: 4px;
  border-radius: var(--radius-small);
  background: var(--colour-surface);
  box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
  pointer-events: auto;
  animation: notice-in 160ms ease-out;
}

@keyframes notice-in {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
}

/* The arrival is a courtesy, not information. Anyone who has asked for less
   motion gets the message without it. */
@media (prefers-reduced-motion: reduce) {
  .notice {
    animation: none;
  }
}

.notice__message {
  margin: 0;
  font-size: 0.85rem;
  min-width: 0;
}

.notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-small);
}

.notice--info {
  border-left-color: var(--colour-accent);
}

.notice--success {
  border-left-color: var(--colour-success);
  background: var(--colour-success-surface);
}

.notice--warning {
  border-left-color: var(--colour-warning);
  background: var(--colour-warning-surface);
}

.notice--error {
  border-left-color: var(--colour-error);
  background: var(--colour-error-surface);
}