Toast Slide

<div class="nuda-toast" role="alert" aria-live="polite">
  <div class="nuda-toast__icon">&#10003;</div>
  <div class="nuda-toast__content">
    <p class="nuda-toast__title">Saved successfully</p>
    <p class="nuda-toast__desc">Your changes have been saved.</p>
  </div>
  <button class="nuda-toast__close" aria-label="Dismiss">&times;</button>
</div>

/* Toast Slide
   Toast notification sliding in from the right.
   Customize: --toast-accent, --toast-bg, --toast-radius */

.nuda-toast {
  --toast-accent: #e4ff54;
  --toast-bg: rgba(255, 255, 255, 0.06);
  --toast-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--toast-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--toast-accent);
  border-radius: var(--toast-radius);
  padding: 0.85rem 1rem;
  min-width: 280px;
  animation: nuda-toast-slide-in 0.4s ease-out;
}

.nuda-toast__icon {
  color: var(--toast-accent);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 1px;
}

.nuda-toast__content {
  flex: 1;
}

.nuda-toast__title {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
}

.nuda-toast__desc {
  color: #999;
  font-size: 0.75rem;
  margin: 0.2rem 0 0;
}

.nuda-toast__close {
  background: none;
  border: none;
  color: #666;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.nuda-toast__close:hover {
  color: #fff;
}

@keyframes nuda-toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-toast {
    animation: none;
  }
}