import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './telia-vst2.js';

const teliaRowCss = ".telia-row{box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:left;margin-left:calc(-1 * calc(1.6rem * var(--voca-rem-multiplier)) / 2);margin-right:calc(-1 * calc(1.6rem * var(--voca-rem-multiplier)) / 2)}@media screen and (min-width: 37.5em){.telia-row{margin-left:calc(-1 * calc(2.4rem * var(--voca-rem-multiplier)) / 2);margin-right:calc(-1 * calc(2.4rem * var(--voca-rem-multiplier)) / 2)}}@media screen and (min-width: 64em){.telia-row{margin-left:calc(-1 * calc(2.4rem * var(--voca-rem-multiplier)) / 2);margin-right:calc(-1 * calc(2.4rem * var(--voca-rem-multiplier)) / 2)}}.telia-row:last-of-type{margin-bottom:0}.telia-row--sm{margin-bottom:calc(1.6rem * var(--voca-rem-multiplier))}.telia-row--md{margin-bottom:calc(2.4rem * var(--voca-rem-multiplier))}.telia-row--lg{margin-bottom:calc(2.4rem * var(--voca-rem-multiplier))}@media screen and (min-width: 64em){.telia-row--lg{margin-bottom:calc(4.8rem * var(--voca-rem-multiplier))}}.telia-row--xl{margin-bottom:calc(4.8rem * var(--voca-rem-multiplier))}@media screen and (min-width: 64em){.telia-row--xl{margin-bottom:calc(8rem * var(--voca-rem-multiplier))}}.telia-row--col-gap{margin-top:calc(-1 * calc(1.6rem * var(--voca-rem-multiplier)))}@media screen and (min-width: 37.5em){.telia-row--col-gap{margin-top:calc(-1 * calc(2.4rem * var(--voca-rem-multiplier)))}}.telia-row--col-gap>telia-col{margin-top:calc(1.6rem * var(--voca-rem-multiplier))}@media screen and (min-width: 37.5em){.telia-row--col-gap>telia-col{margin-top:calc(2.4rem * var(--voca-rem-multiplier))}}";

const TeliaRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-row';
  }
  render() {
    const componentClass = 'telia-row';
    const rowClasses = {
      [componentClass]: true,
      [`${componentClass}--${this.spacing}`]: !!this.spacing,
      [`${componentClass}--col-gap`]: this.gap,
    };
    return (h(Host, { class: rowClasses }, h("slot", null), h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get style() { return teliaRowCss; }
}, [4, "telia-row", {
    "spacing": [1],
    "gap": [4]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-row", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-row":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaRow);
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { TeliaRow as T, defineCustomElement as d };
