.toast-container{--radius:.25rem;--stack-gap:.5rem;--safe-area-gap:env(safe-area-inset-bottom);max-width:28rem;bottom:calc(var(--safe-area-gap,0px) + .5rem);z-index:5000;transition:all .4s;display:block;position:fixed;left:1rem}.toast-container .toast{opacity:0;align-items:center;width:28rem;transition:all .4s;display:flex;position:absolute;bottom:0;right:0;transform:translateY(86px)}.toast-container .toast .toast-inner{--toast-bg:none;--toast-fg:#fff;--toast-border-color:#eaeaea;box-sizing:border-box;border-radius:var(--radius);border:1px solid var(--toast-border-color);width:100%;color:var(--toast-fg);background-color:var(--toast-bg);min-height:3.25rem;height:var(--height);justify-content:space-between;align-items:center;gap:.5rem;padding:.25rem .75rem;transition:all .25s;display:flex}.toast-container .toast .toast-inner.default{--toast-bg:#239acf;--toast-border-color:var(--toast-bg)}.toast-container .toast .toast-inner.success{--toast-bg:#7cb342;--toast-border-color:var(--toast-bg)}.toast-container .toast .toast-inner.error{--toast-bg:#c33434;--toast-border-color:var(--toast-bg)}.toast-container .toast .toast-inner.warning{--toast-bg:#f6bf26;--toast-border-color:var(--toast-bg)}.toast-container .toast .toast-inner.dark{--toast-bg:#4a4a4a;--toast-fg:#fff;--toast-border-color:#333}.toast-container .toast .toast-inner.dark .toast-button{--button-fg:#000;--button-bg:#fff;--button-border:#fff;--button-border-hover:#fff;--button-fg-hover:#fff}.toast-container .toast .toast-inner.dark .toast-button.cancel-button{--cancel-button-bg:var(--toast-bg);--cancel-button-fg:var(--toast-fg);--cancel-button-border:var(--toast-bg)}.toast-container .toast .toast-inner.dark .toast-button.cancel-button:hover{color:var(--toast-fg);border-color:var(--toast-fg)}.toast-container .toast .toast-text{color:#fff;align-items:center;width:100%;height:100%;margin-top:-1px;margin-right:1.5rem;font-size:1rem;font-weight:700;transition:all .3s ease-in;display:flex}.toast-container .toast .toast-button{--button-fg:#000;--button-bg:#fff;--button-border:#fff;--button-border-hover:#fff;--button-fg-hover:#fff;background-color:var(--button-bg);min-width:auto;color:var(--button-fg);white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;vertical-align:middle;border-radius:var(--radius);border:1px solid var(--button-border);outline:none;flex-shrink:0;justify-content:center;align-items:center;padding:.75rem;font-size:.875rem;transition:all .2s;display:inline-flex}.toast-container .toast .toast-button:hover{border-color:var(--button-border-hover);color:var(--button-fg-hover);background-color:#0000}.toast-container .toast .toast-button.cancel-button{--cancel-button-bg:var(--toast-bg);--cancel-button-fg:var(--toast-fg);--cancel-button-border:var(--toast-bg);color:#fff;border-color:var(--cancel-button-border);background-color:var(--cancel-button-bg);border-radius:10rem;min-width:2rem;min-height:2rem;margin-right:0;padding:0}.toast-container .toast .toast-button.cancel-button:hover{--cancel-button-fg:var(--toast-fg);--cancel-button-border:#fff}.toast-container .toast .default .toast-button{--button-fg:#fff;--button-bg:#000;--button-border:#000;--button-border-hover:#000;--button-fg-hover:#000}.toast-container .toast:after{content:"";background:0 0;width:100%;height:1000px;position:absolute;top:calc(100% + 1px);left:0;right:0}.toast-container .toast.toast-1{opacity:1;transform:translate(0,0)}.toast-container .toast:not(:last-child){--i:calc(var(--index) - 1);transform:translate3d(0, calc(1px - (var(--stack-gap) * var(--i))), 0) scale(calc(1 - .05 * var(--i)));opacity:1}.toast-container .toast:not(:last-child) .toast-inner{height:var(--front-height)}.toast-container .toast:not(:last-child) .toast-inner .toast-text{opacity:0}.toast-container .toast.toast-4{opacity:0}.toast-container:has(.toast-2):hover{bottom:calc(var(--safe-area-gap,0px) + .5rem)}.toast-container:hover .toast{transform:translate3d(0, calc(var(--hover-offset-y) - var(--stack-gap) * (var(--index) - 1)), 0)}.toast-container:hover .toast .toast-inner{height:var(--height)}.toast-container:hover .toast .toast-text{opacity:1!important}@media (max-width:767px){.toast-container{width:calc(100% - 1.5rem);max-width:100%;left:.75rem}.toast-container .toast{width:100%}body:has(.floating-button-group){--floating-button-group-height:3.5rem}body:has(.floating-button-group) .toast-container{bottom:calc(var(--safe-area-gap,0px) + .5rem + var(--floating-button-group-height))}body:has(.floating-button-group) .toast-container:has(.toast-2):hover{bottom:calc(var(--safe-area-gap,0px) + .5rem + var(--floating-button-group-height))}}