import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as cls } from './helpers.js';
import { d as defineCustomElement$2 } from './component.js';

const styleCss = "@charset \"UTF-8\";x-breadcrumbs{font-size:1rem}x-breadcrumbs.fluid nav ol{border-radius:0;-webkit-box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2);box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2);border-top:1px solid rgba(var(--color-border-rgb, 200, 199, 204), 0.35);border-bottom:1px solid rgba(var(--color-border-rgb, 200, 199, 204), 0.35)}.is-dark-mode x-breadcrumbs.fluid nav ol{-webkit-box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35);box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35);border-top:1px solid var(--color-dark-tint, #414141);border-bottom:1px solid var(--color-dark-tint, #414141)}x-breadcrumbs nav ol{padding:0.5em 1em;margin:1em auto;background-color:var(--color-white, #FFFFFF);-webkit-box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);border:none;margin-bottom:1rem;border-radius:0.5rem;position:relative}.is-dark-mode x-breadcrumbs nav ol{color:var(--color-text-light, #FEFEFE);background-color:var(--color-black, #000000);-webkit-box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35), inset 0 0 0 1px var(--color-dark-tint, #414141);box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35), inset 0 0 0 1px var(--color-dark-tint, #414141)}x-breadcrumbs nav ol::after{clear:both;content:\"\";display:table}x-breadcrumbs nav ol x-breadcrumb:last-of-type li::after{display:none}x-breadcrumbs nav ol x-breadcrumb li{display:inline-block;margin:0.5em 0}x-breadcrumbs nav ol x-breadcrumb li::after{display:inline-block;margin:0 0.6em;color:var(--color-default, #9B9B9B)}x-breadcrumbs nav ol x-breadcrumb li.style-chevron::after{content:\"»\"}x-breadcrumbs nav ol x-breadcrumb li.style-bull::after{content:\"•\"}x-breadcrumbs nav ol x-breadcrumb li.style-whitespace::after{content:\" \"}x-breadcrumbs nav ol x-breadcrumb li.style-arrow::after{content:\"→\"}x-breadcrumbs nav ol x-breadcrumb li:empty x-icon{margin-right:0}x-breadcrumbs nav ol x-breadcrumb li x-icon{color:inherit;margin-right:0.1rem}x-breadcrumbs nav ol x-breadcrumb li a{-webkit-transition:color 0.3s;transition:color 0.3s;color:var(--color-default, #9B9B9B)}x-card x-breadcrumbs.fluid nav ol{margin-left:calc(-1.25rem + 1px);margin-right:calc(-1.25rem + 1px)}x-card x-breadcrumbs nav ol{background-color:rgba(var(--color-border-rgb, 200, 199, 204), 0.1)}";
const XBreadcrumbStyle0 = styleCss;

const XBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class XBreadcrumb extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.href = undefined;
        this.icon = undefined;
        this.separator = 'chevron';
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: 'b8f0f04222410eafdd86b8f5877b28d84b822695' }, h("li", { key: '8c3025aeea8f17a7418915866141eb9492c83920', class: cls(`style-${this.separator}`) }, this.href ? (h("a", { href: this.href }, this.icon && h("x-icon", { name: this.icon }), " ", h("slot", null))) :
            (h("span", null, this.icon && h("x-icon", { name: this.icon }), " ", h("slot", null)))));
    }
    static get style() { return XBreadcrumbStyle0; }
}, [4, "x-breadcrumb", {
        "href": [1],
        "icon": [1],
        "separator": [1]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-breadcrumb", "x-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "x-breadcrumb":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XBreadcrumb$1);
            }
            break;
        case "x-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const XBreadcrumb = XBreadcrumb$1;
const defineCustomElement = defineCustomElement$1;

export { XBreadcrumb, defineCustomElement };
