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

const scFlexCss = ":host{display:block;--spacing:var(--sc-spacing-small)}.flex{display:flex;gap:var(--spacing);justify-content:space-between}.justify-flex-start{justify-content:flex-start}.justify-flex-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-space-between{justify-content:space-between}.justify-space-around{justify-content:space-around}.justify-space-evenly{justify-content:space-evenly}.wrap-wrap{flex-wrap:wrap}.wrap-no-wrap{flex-wrap:no-wrap}.align-flex-start{align-items:flex-start}.align-flex-end{align-items:flex-end}.align-center{align-items:center}.align-baseline{align-items:baseline}.align-stretch{align-items:stretch}.direction-row{flex-direction:row}.direction-row-reverse{flex-direction:row-reverse}.direction-column{flex-direction:column}.direction-column-reverse{flex-direction:column-reverse}";

const ScFlex = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
  }
  render() {
    return (h("div", { class: {
        flex: true,
        ...(this.justifyContent ? { [`justify-${this.justifyContent}`]: true } : {}),
        ...(this.alignItems ? { [`align-${this.alignItems}`]: true } : {}),
        ...(this.flexDirection ? { [`direction-${this.flexDirection}`]: true } : {}),
        ...(this.flexWrap ? { [`wrap-${this.flexWrap}`]: true } : {}),
      } }, h("slot", null)));
  }
  static get style() { return scFlexCss; }
}, [1, "sc-flex", {
    "alignItems": [1, "align-items"],
    "justifyContent": [1, "justify-content"],
    "flexDirection": [1, "flex-direction"],
    "flexWrap": [1, "flex-wrap"]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-flex"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-flex":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScFlex);
      }
      break;
  } });
}
defineCustomElement();

export { ScFlex as S, defineCustomElement as d };
