const smNotifications=document.createElement("template");smNotifications.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n    }\n    .hide{\n        opacity: 0 !important;\n        pointer-events: none !important;\n    }\n    .notification-panel{\n        display: grid;\n        width: 100%;\n        gap: 0.5rem;\n        position: fixed;\n        left: 0;\n        bottom: 0;\n        z-index: 100;\n        max-height: 100%;\n        padding: 1.5rem;\n        overflow: hidden auto;\n        -ms-scroll-chaining: none;\n            overscroll-behavior: contain;\n    }\n    .notification-panel:empty{\n        display:none;\n    }\n    .notification{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        position: relative;\n        border-radius: 0.3rem;\n        -webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),\n        0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);\n        box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),\n        0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);\n        background: rgba(var(--foreground-color), 1);\n        overflow: hidden;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        -ms-word-break: break-all;\n        word-break: break-all;\n        word-break: break-word;\n        -ms-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n        max-width: 100%;\n        padding: 1rem;\n    }\n    h4:first-letter,\n    p:first-letter{\n        text-transform: uppercase;\n    }\n    h4{\n        font-weight: 400;\n    }\n    p{\n        line-height: 1.6;\n        -webkit-box-flex: 1;\n            -ms-flex: 1;\n                flex: 1;\n        color: rgba(var(--text-color), 0.9);\n        overflow-wrap: break-word;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        -ms-word-break: break-all;\n        word-break: break-all;\n        word-break: break-word;\n        -ms-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n        max-width: 100%;\n        align-self: center;\n    }\n    .notification:last-of-type{\n        margin-bottom: 0;\n    }\n    .icon {\n        height: 100%;\n        width: 100%;\n        fill: rgba(var(--text-color), 0.7);\n    }\n    .close{\n        height: 2rem;\n        width: 2rem;\n        border: none;\n        cursor: pointer;\n        margin-left: 1rem;\n        border-radius: 50%;\n        padding: 0.3rem;\n        transition: background-color 0.3s, transform 0.3s;\n        background-color: transparent;\n    }\n    .close:active{\n        transform: scale(0.9);\n    }\n    @media screen and (min-width: 640px){\n        .notification-panel{\n            max-width: 28rem;\n            width: max-content;\n        }\n        .notification{\n            width: auto;\n            border: solid 1px rgba(var(--text-color), 0.2);\n        }\n    }\n    @media (any-hover: hover){\n        ::-webkit-scrollbar{\n            width: 0.5rem;\n        }\n        \n        ::-webkit-scrollbar-thumb{\n            background: rgba(var(--text-color), 0.3);\n            border-radius: 1rem;\n            &:hover{\n                background: rgba(var(--text-color), 0.5);\n            }\n        }\n        .close:hover{\n            background-color: rgba(var(--text-color), 0.1);\n        }\n    }\n</style>\n<div class="notification-panel"></div>\n',customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"ease"},this.push=this.push.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}push(n,o={}){const{pinned:e}=o;let t=document.createElement("div"),i="";t.classList.add("notification"),e&&t.classList.add("pinned"),i+=`\n            <p>${n}</p>\n            <button class="close">\n                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n            </button>`,t.innerHTML=i,this.notificationPanel.append(t),t.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions)}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(1rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});const n=new MutationObserver(n=>{n.forEach(n=>{"childList"===n.type&&n.addedNodes.length&&!n.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(n.addedNodes[0])},5e3)})});n.observe(this.notificationPanel,{childList:!0})}});