const smButton=document.createElement("template");smButton.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-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    width: auto;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0.6rem 1.2rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.1);\n}\n:host([variant='primary']) .button{\n    background: var(--accent-color);\n    color: rgba(var(--background-color), 1);\n}\n:host([variant='outlined']) .button{\n    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n    background: transparent; \n    color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n    background: rgba(var(--background-color), 1); \n    color: var(--accent-color);\n}\n.button {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    border-radius: var(--border-radius); \n    -webkit-box-pack: center; \n        -ms-flex-pack: center; \n            justify-content: center;\n    transition: box-shadow 0.3s, background-color 0.3s;\n    font-family: inherit;\n    font-size: 0.9rem;\n    font-weight: 500;\n    background-color: var(--background); \n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n    overflow: hidden;\n    border: none;\n    color: inherit;\n    align-items: center;\n}\n:host([disabled]) .button{\n    cursor: not-allowed;\n    opacity: 0.6;\n    color: rgba(var(--text-color), 1);\n    background-color: rgba(var(--text-color), 0.3);\n}\n@media (hover: hover){\n    :host(:not([disabled])) .button:hover{\n        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n    :host([variant='outlined']) .button:hover{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n}\n@media (hover: none){\n    :host(:not([disabled])) .button:active{\n        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n    :host([variant='outlined']) .button:active{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n}\n</style>\n<div part=\"button\" class=\"button\">\n    <slot></slot>   \n</div>",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}static get observedAttributes(){return["disabled"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button")}attributeChangedCallback(t,n,e){"disabled"===t?(this.removeAttribute("tabindex"),this.setAttribute("aria-disabled","true")):(this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled","false"))}});