import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { c as cls } from './helpers.js';

const styleCss = "x-logo{display:inline-block;position:relative;font-family:logos, sans-serif !important;font-style:normal;font-weight:normal !important;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:1em;-webkit-box-sizing:content-box;box-sizing:content-box;line-height:1em;vertical-align:middle;-ms-flex-pack:center;justify-content:center}.is-dark-mode x-logo{color:var(--color-text-light, #FEFEFE)}";
const XLogoStyle0 = styleCss;

const XLogo$1 = /*@__PURE__*/ proxyCustomElement(class XLogo extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.press = createEvent(this, "press", 3);
        this.name = undefined;
        this.color = 'default';
        this.size = '1rem';
    }
    /**
     * Emit onclick event
     *
     * @param e
     */
    onClickHandler(e) {
        this.press.emit(e);
    }
    /**
     * Render component
     */
    render() {
        return h("i", { key: 'a9ff707092e98e746ceda687381aa9a822923408', class: cls(`logo-${this.name}`, `logo-color-${this.color}`), style: { fontSize: this.size } });
    }
    static get style() { return XLogoStyle0; }
}, [0, "x-logo", {
        "name": [1],
        "color": [1],
        "size": [1]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-logo"];
    components.forEach(tagName => { switch (tagName) {
        case "x-logo":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XLogo$1);
            }
            break;
    } });
}

const XLogo = XLogo$1;
const defineCustomElement = defineCustomElement$1;

export { XLogo, defineCustomElement };
