.toast-holder { position: fixed; left: 50vw; transform: translate(-50%, 0); bottom: 50px; z-index: 1; } .toast { display: flex; padding: 10px; overflow-y: auto; background-color: var(--primary-input-color); opacity: 0; border-radius: 20px; cursor: pointer; } .message { margin: auto; } .open { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms; } .closed { visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms; }