:root{--snakbar-white:#fff;--snakbar-green:#4caf50;--snakbar-blue:#2896f3;--snakbar-yellow:#bf9303;--snakbar-red:#f55153;--snakbar-duration:.25s}*,:after,:before{box-sizing:border-box;margin:0;padding:0}h1{font-size:clamp(20px,3vw,4rem);text-align:center}.buttons-container{align-items:center;display:flex;flex-wrap:wrap;height:calc(100vh - 10.4rem);justify-content:center;padding:1.1rem}.buttons-container .btn-toast{color:#fff;cursor:pointer;font-size:1.6rem;padding:.8rem 1.6rem;transition:filter var(--snakbar-duration)}.buttons-container .btn-toast:not(:last-child){margin-right:.8rem}.buttons-container .btn-toast[data-type=success]{background-color:var(--snakbar-green)}.buttons-container .btn-toast[data-type=system]{background-color:var(--snakbar-blue)}.buttons-container .btn-toast[data-type=warning]{background-color:var(--snakbar-yellow)}.buttons-container .btn-toast[data-type=error]{background-color:var(--snakbar-red)}.buttons-container .btn-toast:hover{filter:opacity(.9)}.toasts-container{padding:1.1rem;position:fixed;right:0;top:0;z-index:1000000000}:has(.rightbar) .toasts-container{top:50px}.toasts-container .toast{align-items:center;animation:toast-opening var(--snakbar-duration) ease-in-out forwards;background-color:#121212;border-radius:1.2rem;display:flex;justify-content:space-between;margin-bottom:1.1rem;max-width:50rem;min-width:28rem;min-width:24rem;opacity:0;overflow-x:hidden;padding:1.1rem;position:relative;transform:translate(100%)}@media screen and (max-width:600px){.toasts-container .toast{min-width:18rem}}.toasts-container .toast:not(.active){animation-duration:.35s;animation-name:toast-closing}.toasts-container .toast .t-icon{margin-right:1.1rem}.toasts-container .toast .t-icon svg{fill:var(--snakbar-white);height:1.1rem;width:1.1rem}.toasts-container .toast .t-message{color:var(--snakbar-white);font-size:16px;line-break:auto;line-height:22px;margin-right:1.1rem}.toasts-container .toast .t-close svg{fill:var(--snakbar-white);cursor:pointer;height:1.01rem;opacity:1;transition:opacity var(--snakbar-duration);width:1.01rem}@media (hover:hover){.toasts-container .toast .t-close svg{opacity:.5}}.toasts-container .toast .t-close:hover svg{opacity:1}.t-message{width:100%}.toasts-container .toast .t-progress-bar{animation:progress-bar-animation linear forwards var(--toast-duration,3s);background-color:#ffffff80;border-radius:0 0 0 .5rem;bottom:0;display:block;height:6px;left:0;position:absolute;transform-origin:left;width:100%}.toasts-container .toast.success{background-color:var(--snakbar-green)}.toasts-container .toast.system{background-color:var(--snakbar-blue)}.toasts-container .toast.warning{background-color:var(--snakbar-yellow)}.toasts-container .toast.error{background-color:var(--snakbar-red)}@keyframes toast-opening{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes toast-closing{0%{opacity:1;transform:translate(0)}75%{max-height:15rem;opacity:0;padding:1.1rem;transform:translate(100%)}to{max-height:0;padding:0;transform:translate(100%)}}@keyframes progress-bar-animation{to{transform:scaleX(0)}}