import { h } from './index-38ad4957.js';
import { c as createStyleSheet } from './JSS-67b5cff8.js';

function PortalSectionView(props) {
  // Due to sole usage of props, not feasiable to move out of render function
  const style = {
    LabelContainer: {
      "margin-bottom": props.labelMargin === "none"
        ? props.labelMargin
        : `var(--sl-spacing-${props.labelMargin})`,
    },
    SectionContainer: {
      textAlign: props.textAlign || "left",
      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("div", { class: sheet.classes.SectionContainer, part: "sqm-base" },
    h("style", { type: "text/css" }, styleString),
    h("div", { class: sheet.classes.LabelContainer, part: "sqm-label" }, props.label),
    props.content));
}

function PortalContainerView(props, children) {
  const style = {
    Container: {
      boxSizing: "border-box",
      display: props.display || "grid",
      flexWrap: props.flexWrap || "wrap",
      "grid-template-columns": props.direction === "row"
        ? `repeat(auto-fill, minmax(${props.minWidth}, auto))`
        : "100%",
      "grid-gap": `var(--sl-spacing-${props.gap})`,
      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
      maxWidth: props.maxWidth,
      margin: props.center && "auto",
      justifyContent: props.justifyContent,
      backgroundColor: props.backgroundColor || "var(--sqm-portal-background)",
    },
  };
  const vanillaStyle = `
  :host{
    width: 100%;
    display: block;
  }`;
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    children));
}

export { PortalContainerView as P, PortalSectionView as a };
