import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const scDividerCss = ":host{display:block;min-height:1px}.divider{position:relative;padding:var(--spacing) 0}.line__container{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center}.line{width:100%;border-top:1px solid var(--sc-color-gray-200)}.text__container{position:relative;display:flex;justify-content:center;font-size:var(--sc-font-size-small)}.text{padding:0 var(--sc-spacing-small);background:var(--sc-color-white);color:var(--sc-color-gray-500)}";

const ScDivider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
  }
  render() {
    return (h("div", { class: "divider", part: "base" }, h("div", { class: "line__container", "aria-hidden": "true" }, h("div", { class: "line", part: "line" })), h("div", { class: "text__container" }, h("span", { class: "text", part: "text" }, h("slot", null)))));
  }
  static get style() { return scDividerCss; }
}, [1, "sc-divider"]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-divider"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-divider":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScDivider);
      }
      break;
  } });
}
defineCustomElement();

export { ScDivider as S, defineCustomElement as d };
