import { css } from "@emotion/react"

import { ImpaktMode } from "@/redux/config/configState"
import { globalColor } from "@/utils/colorBuilder"
import { Theme } from "@mui/material"

export const applyCanvasContainerWrapperStyle = (
  width: string,
  mode: ImpaktMode,
  theme:Theme
) => {
  const borderStyle =
    mode === "edit" && width !== "100%"
      ? css`
          border-left: 1px solid ${globalColor("grayBlue-09")};
          border-right: 1px solid ${globalColor("grayBlue-09")};
        `
      : null
  return css`
    width: ${width};
    height: 100%;
    position: relative;
    background-color: ${theme.palette.background.default};
    flex: none;
    margin: 0 auto;
    ${borderStyle};
    
  `
}
//${globalColor("white-01")};
export const pageContainerWrapperStyle = css`
  width: 100%;
  height: 100%;
`

export const emptyContainerStyle = css`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: ${globalColor("grayBlue-04")};
  font-size: 14px;
  padding: 0 16px;
`
