.toast-container{--radius:0.25rem;--stack-gap:0.5rem;--safe-area-gap:env(safe-area-inset-bottom);position:fixed;display:block;max-width:28rem;bottom:calc(var(--safe-area-gap, 0px) + .5rem);left:1rem;z-index:5000;transition:all .4s ease;& .toast{display:flex;align-items:center;position:absolute;bottom:0;right:0;width:28rem;transition:all .4s ease;transform:translate3d(0,86px,0);opacity:0;& .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);display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.25rem .75rem;color:var(--toast-fg);background-color:var(--toast-bg);min-height:3.25rem;height:var(--height);transition:all .25s ease;&.default{--toast-bg:rgb(35,154,207);--toast-border-color:var(--toast-bg)}&.success{--toast-bg:rgb(124,179,66);--toast-border-color:var(--toast-bg)}&.error{--toast-bg:rgb(195,52,52);--toast-border-color:var(--toast-bg)}&.warning{--toast-bg:rgb(246,191,38);--toast-border-color:var(--toast-bg)}&.dark{--toast-bg:#4a4a4a;--toast-fg:#fff;--toast-border-color:#333;& .toast-button{--button-fg:#000;--button-bg:#fff;--button-border:#fff;--button-border-hover:#fff;--button-fg-hover:#fff;&.cancel-button{--cancel-button-bg:var(--toast-bg);--cancel-button-fg:var(--toast-fg);--cancel-button-border:var(--toast-bg);&:hover{color:var(--toast-fg);border-color:var(--toast-fg)}}}}}& .toast-text{display:flex;align-items:center;width:100%;height:100%;font-size:1rem;font-weight:700;color:#fff;margin-top:-1px;margin-right:1.5rem;transition:all .3s ease-in}& .toast-button{--button-fg:#000;--button-bg:#fff;--button-border:#fff;--button-border-hover:#fff;--button-fg-hover:#fff;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:auto;padding:.75rem;font-size:.875rem;background-color:var(--button-bg);color:var(--button-fg);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;vertical-align:middle;border-radius:var(--radius);outline:none;border:1px solid var(--button-border);transition:all .2s ease;&:hover{border-color:var(--button-border-hover);background-color:transparent;color:var(--button-fg-hover)}&.cancel-button{--cancel-button-bg:var(--toast-bg);--cancel-button-fg:var(--toast-fg);--cancel-button-border:var(--toast-bg);margin-right:0;color:#fff;border-color:var(--cancel-button-border);background-color:var(--cancel-button-bg);border-radius:10rem;min-height:2rem;min-width:2rem;padding:0;&:hover{--cancel-button-fg:var(--toast-fg);--cancel-button-border:#fff}}}& .default .toast-button{--button-fg:#fff;--button-bg:#000;--button-border:#000;--button-border-hover:#000;--button-fg-hover:#000}&:after{content:"";position:absolute;left:0;right:0;top:calc(100% + 1px);width:100%;height:1000px;background:transparent}&.toast-1{transform:translateZ(0);opacity:1}&: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-inner{height:var(--front-height);& .toast-text{opacity:0}}}&.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-inner{height:var(--height)}& .toast-text{opacity:1!important}}@media (max-width:767px){.toast-container{width:calc(100% - 1.5rem);max-width:100%;left:.75rem;& .toast{width:calc(100%)}}}@media (max-width:767px){body:has(.floating-button-group){--floating-button-group-height:3.5rem;.toast-container{bottom:calc(var(--safe-area-gap, 0px) + .5rem + var(--floating-button-group-height))}.toast-container:has(.toast-2):hover{bottom:calc(var(--safe-area-gap, 0px) + .5rem + var(--floating-button-group-height))}}}