/* Shared toasts. Page and tone colors come from the demo tokens in frame.css.
   Both themes use those tokens for the border and the glyph. */

/* Entrance timing. The color tokens live in frame.css. */
:root {
  --motion-fast: .25s;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* Stack, pinned to the lower corner. Clicks pass through until a toast is shown. */
.nx-toasts {
  z-index:90; pointer-events:none; flex-direction:column; gap:8px;
  width:min(360px,100% - 32px); display:flex; position:fixed; bottom:20px; right:20px
}

/* Toast shell. The next rule sets the text color from the frame token. */
.nx-toast {
  pointer-events:auto; background:var(--surface-solid);
  box-shadow:var(--shadow-border), var(--shadow-lg);
  animation:nxIn var(--motion-fast) var(--ease);
  border-radius:12px; align-items:flex-start; gap:10px; padding:12px 14px; display:flex
}

.nx-toast {
  color: var(--nx-text);
}

/* Message block. Long text wraps instead of widening the toast. */
.nx-toast > div {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Dismiss control. Success and info hide it until hover or focus. */
.nx-toast-dismiss {
  margin: -3px -3px -3px auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.nx-toast-dismiss svg {
  width: 16px;
  height: 16px;
}

.nx-toast-ok .nx-toast-dismiss,
.nx-toast-info .nx-toast-dismiss {
  opacity: 0;
  pointer-events: none;
}

.nx-toast-ok:hover .nx-toast-dismiss,
.nx-toast-ok:focus-within .nx-toast-dismiss,
.nx-toast-info:hover .nx-toast-dismiss,
.nx-toast-info:focus-within .nx-toast-dismiss {
  opacity: 1;
  pointer-events: auto;
}

/* One demo tone color feeds both the 1px border and the glyph, in both themes. */
.nx-toast-ok { --nx-toast-tone: var(--ok); }
.nx-toast-info { --nx-toast-tone: var(--info); }
.nx-toast-warn { --nx-toast-tone: var(--warn); }
.nx-toast-danger { --nx-toast-tone: var(--danger); }

/* Tinted body and a 1px tone border. Padding drops 1px so the box keeps today's size. */
.nx-toast-ok,
.nx-toast-info,
.nx-toast-warn,
.nx-toast-danger {
  padding: 11px 13px;
  border: 1px solid var(--nx-toast-tone);
  box-shadow: var(--shadow-lg);
}

/* Soft fill, one per tone, laid over the solid surface. */
.nx-toast-ok { background-image: linear-gradient(var(--ok-soft), var(--ok-soft)); }
.nx-toast-info { background-image: linear-gradient(var(--info-soft), var(--info-soft)); }
.nx-toast-warn { background-image: linear-gradient(var(--warn-soft), var(--warn-soft)); }
.nx-toast-danger { background-image: linear-gradient(var(--danger-soft), var(--danger-soft)); }

/* Glyph uses the same tone color as the border. */
.nx-toast-glyph {
  margin-top: 1px;
  color: var(--nx-toast-tone);
}

/* Entrance. */
@keyframes nxIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Reduced motion drops the entrance. */
@media (prefers-reduced-motion: reduce) {
  .nx-toast {
    animation: none;
  }
}

/* Preview row for the toast samples. */
.nx-toast-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px 16px;
}

.nx-toast-preview button {
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  background: var(--nx-bg);
  padding: 8px 12px;
}