if(!customElements.get("remex-card-loading")){class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._rows=this.getAttribute("rows")??3,this._theme="dark"}set rows(t){this._rows=t||3,this.render()}get rows(){return this._rows??this.getAttribute("rows")??3}get theme(){return this._theme??this.getAttribute("theme")??"dark"}set theme(t){this._theme=t||"dark",this.render()}attributeChangedCallback(t,e,n){"rows"===t&&e!==n&&(this._rows=n,this.render()),"theme"===t&&e!==n&&(this._rows=n,this.render())}connectedCallback(){this.render()}render(){
this.shadowRoot.innerHTML=`\n                <style>\n                    :host{opacity: 0.6;}\n                    .mt-2 { margin-top: .5rem !important; }\n                    .mt-3 { margin-top: 1rem !important; }\n                    .col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }\n                    .col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }\n                    .col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }\n                    .mt-1 { margin-top: .25rem !important; }\n                    .offset-9 { margin-left: 75%; }\n                    .loading-container { -webkit-transition: all .5s; transition: all .5s; }\n                    @keyframes moveBackground {\n                        0% { background-position: -200px 0; }\n                        100% { background-position: 200px 0; }\n                    } \n                    .animated-background {\n                        -webkit-transition: all .5s;\n                        transition: all .5s;   \n                        border-radius: 0.6rem;\n                        animation: moveBackground 3s linear infinite;\n                        background: #e1d7ea;\n                        background: linear-gradient(to right,rgba(243, 225, 240, 0.76) 8%, #e7dee7 18%,rgba(212, 210, 237, 0.71) 33%);\n                        background-size: 200% 100%;\n                        height: 96px;\n                        position: relative;\n                    } \n                    .animated-background.dark { \n                        background: #295c68;\n                        background: linear-gradient(to right,#066b83 8%,rgba(92, 175, 194, 0.69) 18%, #066b83 33%);\n                    }\n                </style>\n                <div class="col-12 p-2 loading-container ${this.theme}">\n                    ${Array.from({
length:this.rows},((t,e)=>e)).map((()=>`\n                        <div class="col-8 animated-background ${this.theme} dark mt-3" style="height: 12px"></div>\n                        <div class="mt-2 col-12 animated-background ${this.theme}" style="height: 60px"></div>\n                        <div class="col-3 offset-9 animated-background ${this.theme} mt-1" style="height: 12px"></div>\n                    `)).join("")}\n                </div>\n            `}}customElements.define("remex-card-loading",t)}