Swipe To Dismiss Toast

<div class="nuda-ta2-swipe" role="status" aria-live="polite">
  <div class="nuda-ta2-swipe__surface">
    <span class="nuda-ta2-swipe__icon" aria-hidden="true">&#9993;</span>
    <div class="nuda-ta2-swipe__body">
      <p class="nuda-ta2-swipe__title">New message</p>
      <p class="nuda-ta2-swipe__desc">&ldquo;See you at 3pm&rdquo;</p>
    </div>
  </div>
  <span class="nuda-ta2-swipe__hint" aria-hidden="true">&larr; swipe to dismiss</span>
</div>

.nuda-ta2-swipe {
  --c: #e4ff54;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 260px;
  max-width: 300px;
}

.nuda-ta2-swipe__surface {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: .7rem .9rem;
  animation: _nuda-ta2swipehint 2.6s ease-in-out infinite;
}

.nuda-ta2-swipe__icon {
  color: var(--c);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.nuda-ta2-swipe__body {
  min-width: 0;
}

.nuda-ta2-swipe__title {
  color: #fafafa;
  font-size: .85rem;
  font-weight: 600;
  margin: 0;
}

.nuda-ta2-swipe__desc {
  color: #8a8a8a;
  font-size: .72rem;
  margin: .15rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nuda-ta2-swipe__hint {
  align-self: center;
  color: #5c5c5c;
  font-size: .65rem;
  letter-spacing: .02em;
  animation: _nuda-ta2swipehinttext 2.6s ease-in-out infinite;
}

@keyframes _nuda-ta2swipehint {
  0%,20% {
    transform: translateX(0);
    opacity: 1;
  }
  45% {
    transform: translateX(-22px);
    opacity: .55;
  }
  60%,100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes _nuda-ta2swipehinttext {
  0%,20% {
    opacity: .6;
  }
  45% {
    opacity: 1;
  }
  60%,100% {
    opacity: .6;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ta2-swipe__surface,.nuda-ta2-swipe__hint {
    animation: none;
  }
}