import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
export function DividedLayoutView(props, children) {
  const getBorder = () => {
    if (props.direction === "row") {
      return {
        "border-right": props.borderless
          ? "none"
          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
      };
    }
    else {
      return {
        "border-bottom": props.borderless
          ? "none"
          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
      };
    }
  };
  const style = {
    LayoutContainer: {
      background: props.backgroundColor,
      display: "contents",
      // First style applies when shadow DOM is disabled, second applies when shadow DOM is enabled
      "& > :not(:last-child)": {
        ...getBorder(),
      },
      "& > ::slotted(*:not(:last-child))": {
        ...getBorder(),
      },
    },
  };
  const hostStyle = `
    display: flex;
    flex: 1;
    box-sizing: border-box;
    flex-direction: ${props.direction};
    background-color: var(--sqm-portal-background);
    color: var(--sqm-text);
    overflow-x: clip;
    ${props.direction === "column" ? "width: 100%; max-width: 100%" : ""}
    ${props.contentAreaWidth !== null
    ? `max-width: ${props.contentAreaWidth} !important;`
    : ""}
  `;
  const vanillaStyle = `
  :host{
    ${hostStyle}
  }
  @media screen and (max-width: 570px) {
    :host {
      display: flex;
      flex-direction: column;
    }
  }
  sqm-divided-layout {
    ${hostStyle}
  }
  `;
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("div", { class: sheet.classes.LayoutContainer, part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    children));
}
