@zeit-ui/vue/lib/toast.css

A popular UI framework for Vue

.zi-toast-area{position:fixed;bottom:.625rem;right:1.25rem;max-width:26.25rem;z-index:2000;transition:transform .4s,opacity .4s ease}@media only screen and (max-width:767px){.zi-toast-area{left:5vw;right:5vw;width:90vw}.zi-toast-area .zi-toast-container{width:100%}}.zi-toast-area:hover .zi-toast-container:nth-last-child(2){transform:translate3d(0,-80px,0) scale(1)}.zi-toast-area:hover .zi-toast-container:nth-last-child(3){transform:translate3d(0,-160px,0) scale(1)}.zi-toast-area:hover .zi-toast-container:nth-last-child(4){transform:translate3d(0,-240px,0) scale(1)}.zi-toast-container{opacity:0;transform:translate3d(0,100%,0) scale(1);transition:all .4s ease;position:absolute;bottom:0;height:4.5rem;right:0}.zi-toast-container.visible{opacity:1;transform:none}.zi-toast-container:last-child{z-index:2002}.zi-toast-container:nth-last-child(2){transform:translate3d(0,-14px,0) scale(.95);z-index:2001}.zi-toast-container:nth-last-child(3){transform:translate3d(0,-28px,0) scale(.9);z-index:2000}.zi-toast-container:nth-last-child(4){transform:translate3d(0,-36px,0) scale(.85);z-index:2000}.zi-toast-container:nth-last-child(n+5){visibility:hidden}.zi-toast{padding:0 1.25rem;border-radius:5px;border:0;width:26.25rem;max-width:100%;height:3.75rem;color:var(--geist-foreground);background-color:var(--geist-background);display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 9px rgba(0,0,0,.12);font-size:.875rem;box-sizing:border-box}.zi-toast.danger,.zi-toast.error{background-color:var(--geist-error);color:var(--geist-background)}.zi-toast.warning{background-color:var(--geist-warning);color:var(--geist-background)}.zi-toast.success{background-color:var(--geist-success);color:var(--geist-background)}.zi-toast .message{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;flex:1;margin:0;padding:0}.zi-toast .message.action{max-width:70%}