mayank-ui/dist/index.css

Advanced React Toast UI with animations and auto-dismiss

.toast-container{display:flex;flex-direction:column;gap:12px;left:50%;max-width:420px;padding:0 20px;pointer-events:none;position:fixed;top:20px;transform:translateX(-50%);width:100%;z-index:9999}.toast{align-items:center;animation:slideDown .4s cubic-bezier(.16,1,.3,1);backdrop-filter:blur(12px);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.12);color:#fff;display:flex;font-size:14px;font-weight:500;gap:12px;line-height:1.5;padding:16px 20px;pointer-events:auto;transition:all .3s ease}.toast:hover{box-shadow:0 12px 28px rgba(0,0,0,.15);transform:translateY(-2px)}.toast-success{background:linear-gradient(135deg,#22c55e,#16a34a);border-color:rgba(34,197,94,.2)}.toast-error{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:rgba(239,68,68,.2)}.toast-info{background:linear-gradient(135deg,#3b82f6,#2563eb);border-color:rgba(59,130,246,.2)}.toast-warning{background:linear-gradient(135deg,#f59e0b,#d97706);border-color:rgba(245,158,11,.2)}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}