import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
export 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));
}
