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

const styleCss = "x-list{display:block;width:100%;padding:0;margin:0;list-style:none}x-list:empty{display:none !important}x-list.list-bordered x-list-item:not(:last-child) .list-item-content,x-list.list-bordered x-list-item:not(:last-child) .list-item-right,x-list.list-bordered x-list-item:not(:last-child) .list-item-indicator{border-bottom:1px solid rgba(var(--color-border-rgb, 200, 199, 204), 0.25)}x-list x-list-item{display:-ms-flexbox;display:flex;color:var(--color-text, #4A4A4A);text-align:left}.is-dark-mode x-list x-list-item{color:var(--color-text-light, #FEFEFE)}x-list x-list-item>div:empty{display:none !important}x-list x-list-item>*{display:-ms-flexbox;display:flex;margin:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-height:3rem;padding:0.5rem 0}x-list x-list-item>*:first-child{padding-left:0.25rem}x-list x-list-item>*:last-child{padding-right:1rem}x-list x-list-item.list-item-clickable{cursor:pointer}x-list x-list-item:hover .list-item-indicator x-icon{-webkit-transform:translateX(3px);transform:translateX(3px);opacity:0.75}x-list x-list-item .list-item-left{font-size:2rem !important;padding-right:1rem;padding-top:0.5rem;padding-bottom:0.5rem}x-list x-list-item .list-item-left x-icon{font-size:2rem !important}x-list x-list-item .list-item-left x-avatar{font-size:2.5rem !important}x-list x-list-item .list-item-content{-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1;font-size:1rem;-ms-flex-align:start;align-items:flex-start}x-list x-list-item .list-item-content h1,x-list x-list-item .list-item-content h2,x-list x-list-item .list-item-content h3,x-list x-list-item .list-item-content h4,x-list x-list-item .list-item-content h5,x-list x-list-item .list-item-content h6{font-size:1rem;font-weight:bold;line-height:1.2rem;margin:0.2rem 0 0.1rem;padding:0;text-overflow:ellipsis;overflow:hidden}x-list x-list-item .list-item-content p{font-size:0.85rem;line-height:1.2rem;margin:0 0 0.2rem;padding:0;text-overflow:ellipsis;overflow:hidden}x-list x-list-item small{padding-left:1rem;width:auto;font-size:0.75rem;text-align:right}x-list x-list-item .list-item-indicator{padding-left:0.5rem;padding-right:0.5rem}x-list x-list-item .list-item-indicator x-icon{opacity:0.5;-webkit-transition:0.3s;transition:0.3s}@media screen and (max-width: 380px){x-list x-list-item .list-item-content{overflow:hidden}x-list x-list-item .list-item-content>*{width:100%;display:block;white-space:nowrap}}";
const XListStyle0 = styleCss;

const XList$1 = /*@__PURE__*/ proxyCustomElement(class XList extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.bordered = false;
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: '177eaa7a89c824ac10af8032d327e71d3b6bf82d', class: cls({ 'list-bordered': this.bordered }) }, h("slot", { key: '9143047f81962be3173f68d8c227eda602a17303' }));
    }
    static get style() { return XListStyle0; }
}, [4, "x-list", {
        "bordered": [4]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-list"];
    components.forEach(tagName => { switch (tagName) {
        case "x-list":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XList$1);
            }
            break;
    } });
}

const XList = XList$1;
const defineCustomElement = defineCustomElement$1;

export { XList, defineCustomElement };
