/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { b as getIonTheme } from './ionic-global.js';

const dividerIonicCss = ":host{--margin-top:0px;--margin-bottom:0px;--padding-start:0px;--padding-end:0px;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);display:block;width:100%}:host hr{display:block;width:100%;margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);border:none}:host hr{border-top:var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5))}:host(.divider-inset){--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px))}:host(.divider-spacing-xsmall){--margin-top:var(--token-space-200, var(--token-scale-200, 8px));--margin-bottom:var(--token-space-200, var(--token-scale-200, 8px))}:host(.divider-spacing-small){--margin-top:var(--token-space-300, var(--token-scale-300, 12px));--margin-bottom:var(--token-space-300, var(--token-scale-300, 12px))}:host(.divider-spacing-medium){--margin-top:var(--token-space-400, var(--token-scale-400, 16px));--margin-bottom:var(--token-space-400, var(--token-scale-400, 16px))}:host(.divider-spacing-large){--margin-top:var(--token-space-600, var(--token-scale-600, 24px));--margin-bottom:var(--token-space-600, var(--token-scale-600, 24px))}:host(.divider-spacing-xlarge){--margin-top:var(--token-space-800, var(--token-scale-800, 32px));--margin-bottom:var(--token-space-800, var(--token-scale-800, 32px))}:host(.divider-spacing-xxlarge){--margin-top:var(--token-space-1000, var(--token-scale-1000, 40px));--margin-bottom:var(--token-space-1000, var(--token-scale-1000, 40px))}";

const dividerIosCss = ":host{--margin-top:0px;--margin-bottom:0px;--padding-start:0px;--padding-end:0px;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);display:block;width:100%}:host hr{display:block;width:100%;margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);border:none}:host hr{border-top:1px solid #e0e0e0}:host(.divider-inset){--padding-start:16px;--padding-end:16px}:host(.divider-spacing-xsmall){--margin-top:8px;--margin-bottom:8px}:host(.divider-spacing-small){--margin-top:12px;--margin-bottom:12px}:host(.divider-spacing-medium){--margin-top:16px;--margin-bottom:16px}:host(.divider-spacing-large){--margin-top:24px;--margin-bottom:24px}:host(.divider-spacing-xlarge){--margin-top:32px;--margin-bottom:32px}:host(.divider-spacing-xxlarge){--margin-top:40px;--margin-bottom:40px}";

const dividerMdCss = ":host{--margin-top:0px;--margin-bottom:0px;--padding-start:0px;--padding-end:0px;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);display:block;width:100%}:host hr{display:block;width:100%;margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);border:none}:host hr{border-top:1px solid #e0e0e0}:host(.divider-inset){--padding-start:16px;--padding-end:16px}:host(.divider-spacing-xsmall){--margin-top:8px;--margin-bottom:8px}:host(.divider-spacing-small){--margin-top:12px;--margin-bottom:12px}:host(.divider-spacing-medium){--margin-top:16px;--margin-bottom:16px}:host(.divider-spacing-large){--margin-top:24px;--margin-bottom:24px}:host(.divider-spacing-xlarge){--margin-top:32px;--margin-bottom:32px}:host(.divider-spacing-xxlarge){--margin-top:40px;--margin-bottom:40px}";

const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        /**
         * Set to `"xxsmall"` for the smallest spacing.
         * Set to "xsmall" for very small spacing.
         * Set to `"small"` for small spacing.
         * Set to "medium" for medium spacing.
         * Set to "large" for large spacing.
         * Set to `"xlarge"` for the largest spacing.
         *
         * Defaults to `"medium"`.
         */
        this.spacing = 'medium';
        /**
         * If `true`, the divider will have horizontal margins
         * By default, it's `false`
         */
        this.inset = false;
    }
    render() {
        const { inset, spacing } = this;
        const theme = getIonTheme(this);
        return (h(Host, { key: '387f7cb3ce69a1d4aa299f988d21d731fd5775d9', class: {
                [theme]: true,
                [`divider-spacing-${spacing}`]: spacing !== undefined,
                [`divider-inset`]: inset,
            } }, h("hr", { key: 'cecfeab61e8f532a1eda36e73011f5447be63480' })));
    }
    static get style() { return {
        ionic: dividerIonicCss,
        ios: dividerIosCss,
        md: dividerMdCss
    }; }
}, [289, "ion-divider", {
        "spacing": [513],
        "inset": [4]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ion-divider"];
    components.forEach(tagName => { switch (tagName) {
        case "ion-divider":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Divider);
            }
            break;
    } });
}

const IonDivider = Divider;
const defineCustomElement = defineCustomElement$1;

export { IonDivider, defineCustomElement };
