import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React, { forwardRef } from "react";
import classnames from "classnames";
import useTheme from "../../hooks/useTheme";
import { getBreakpoints, getAlign, getJustify } from "../Flex/Flex.functions";
import isThemePalette from "../../utils/isThemePalette";
import opacity from "../../utils/opacity";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Container = /*#__PURE__*/forwardRef((props, ref) => {
  const theme = useTheme();
  const {
    // Flex props - ß
    display = "block",
    align = "start",
    direction = "column",
    justify = "start",
    wrap = "wrap",
    alignContent = "start",
    as = null,
    // Box Props
    m = 0,
    mt = null,
    mr = null,
    mb = null,
    ml = null,
    // -----
    p = theme.layout.padding,
    pt = null,
    pr = null,
    pb = null,
    pl = null,
    // -----
    width = null,
    height = null,
    minWidth = null,
    maxWidth = null,
    minHeight = null,
    maxHeight = null,
    fullWidth = false,
    fullHeight = false,
    // Default props
    children,
    variant = "flat",
    backgroundColor = "background",
    backgroundImage = "",
    backgroundProps = {
      repeat: "no-repeat",
      size: "initial",
      position: "center"
    },
    hoverBackgroundColor = null,
    clickable = false,
    hoverable = false,
    className = null,
    blur = 5,
    elevation = 10,
    elevationHover = 20,
    shape = "round",
    ...otherProps
  } = props; // as Component render

  const Component = as || "div";

  function handleBackgroundImage() {
    if (backgroundImage) {
      return `
      background-image: url(${backgroundImage});
      background-repeat: ${backgroundProps.repeat};
      background-size: ${backgroundProps.size};
      background-position: ${backgroundProps.position};
      `;
    }

    return "";
  }

  function handleBackgroundColor() {
    switch (backgroundColor) {
      case "highlight":
        return theme.palette.highlight;

      case "background":
        return theme.palette.background;

      case "shade":
        return theme.palette.shade;

      default:
        return isThemePalette(backgroundColor) ? theme.palette[backgroundColor][500] : backgroundColor;
    }
  }

  function handleShape() {
    switch (shape) {
      case "round":
        return "border-radius: 1.5em;";

      case "rounded":
        return "border-radius: 0.7em;";

      case "square":
        return "border-radius: 0em;";

      default:
        return "border-radius: 0.7em;";
    }
  }

  function handleHoverBackgroundColor() {
    if (!hoverBackgroundColor) return handleBackgroundColor();

    switch (hoverBackgroundColor) {
      case "highlight":
        return theme.palette.highlight;

      case "background":
        return theme.palette.background;

      case "shade":
        return theme.palette.shade;

      default:
        return isThemePalette(hoverBackgroundColor) ? theme.palette[hoverBackgroundColor][500] : hoverBackgroundColor;
    }
  }

  function handleShadowColor() {
    if (variant === "frosted") {
      return opacity("#ffffff", 20);
    }

    switch (backgroundColor) {
      case "highlight":
        return theme.palette.basic.shadow;

      case "background":
        return theme.palette.basic.shadow;

      case "shade":
        return theme.palette.basic.shadow;

      default:
        return isThemePalette(backgroundColor) ? theme.palette[backgroundColor].shadow : opacity(backgroundColor, 24);
    }
  }

  function handleVariantsStyle() {
    switch (variant) {
      case "flat":
        return `
          background-color: ${handleBackgroundColor()};
        `;

      case "neumorphic":
        return `
          background-color: ${handleBackgroundColor()};
          box-shadow: 0px ${elevation}px 
          ${elevation * 2}px ${handleShadowColor()};
        `;

      case "outlined":
        return `
          background-color: transparent;
          border: 1px solid ${handleBackgroundColor()};
        `;

      case "ghost":
        return `
          background-color: ${opacity(handleBackgroundColor(), 20)};
        `;

      case "glassmorphic":
        return `
          background: inherit;
          overflow: hidden;
          z-index: 1;
          box-shadow: 0px ${elevation}px 
          ${elevation * 2}px ${handleShadowColor()};
        `;

      case "frosted":
        return `
          background: inherit;
          overflow: hidden;
          z-index: 1;
          box-shadow: 0px ${elevation}px 
          ${elevation * 2}px ${handleShadowColor()};
          `;

      default:
        return "";
    }
  }

  function handleVariantsHover() {
    if (hoverable || clickable) {
      switch (variant) {
        case "neumorphic":
          return `
          background-color: ${handleHoverBackgroundColor()};
          box-shadow: 0px ${elevationHover}px 
          ${elevationHover * 2}px ${handleShadowColor()};
        `;

        case "outlined":
          return `
          background-color: ${opacity(handleHoverBackgroundColor(), 10)};
          border: 1px solid ${handleHoverBackgroundColor()};
        `;

        case "ghost":
          return `
          background-color: ${opacity(handleHoverBackgroundColor(), 10)};
        `;

        case "glassmorphic":
          return `
          box-shadow: 0px ${elevationHover}px 
          ${elevationHover * 2}px ${handleShadowColor()};
        `;

        case "frosted":
          return `
          box-shadow: 0px ${elevationHover}px 
          ${elevationHover * 2}px ${handleShadowColor()};
        `;

        default:
          return "";
      }
    }

    return "";
  }

  function handleVariantsBefore() {
    switch (variant) {
      case "glassmorphic":
        return `
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: calc(100%);
          height: calc(100%);

          background: inherit;
          filter: blur(${blur}px);
          z-index: -1;
        `;

      case "frosted":
        return `
          content: "";
          position: absolute;
          top: 0px;
          left: 0px;
          width: calc(100%);
          height: calc(100%);
          
          background: inherit;
          box-shadow: inset 0 0 0 200px ${opacity(handleBackgroundColor(), 20)};
          filter: blur(${blur}px);
          z-index: -1;
        `;

      default:
        return "";
    }
  }

  function handleValue(value) {
    if (!value) return "";
    return value ? typeof value === "number" ? `${value * theme.layout.spacingUnit}px` : value : "";
  }

  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Component, {
      "data-testid": "Wps-Container",
      ref: ref,
      ...otherProps,
      className: _JSXStyle.dynamic([["2821631240", [handleShape(), handleVariantsStyle(), handleBackgroundImage(), clickable ? "cursor: pointer;" : "", handleVariantsBefore(), handleVariantsHover()]], ["1412431184", [getBreakpoints(display, "xs", d => d), getBreakpoints(direction, "xs", d => d), getBreakpoints(wrap, "xs", w => w), getBreakpoints(justify, "xs", getJustify), getBreakpoints(align, "xs", getAlign), getBreakpoints(m, "xs", handleValue), getBreakpoints(mt, "xs", handleValue), getBreakpoints(mr, "xs", handleValue), getBreakpoints(mb, "xs", handleValue), getBreakpoints(ml, "xs", handleValue), getBreakpoints(p, "xs", handleValue), getBreakpoints(pt, "xs", handleValue), getBreakpoints(pr, "xs", handleValue), getBreakpoints(pb, "xs", handleValue), getBreakpoints(pl, "xs", handleValue), fullWidth ? "100%" : getBreakpoints(width, "xs", handleValue), fullHeight ? "100%" : getBreakpoints(height, "xs", handleValue), getBreakpoints(minWidth, "xs", handleValue), getBreakpoints(maxWidth, "xs", handleValue), getBreakpoints(minHeight, "xs", handleValue), getBreakpoints(maxHeight, "xs", handleValue), theme.breakpoints.sm.min, getBreakpoints(display, "sm", d => d), getBreakpoints(direction, "sm", d => d), getBreakpoints(wrap, "sm", w => w), getBreakpoints(justify, "sm", getJustify), getBreakpoints(align, "sm", getAlign), getBreakpoints(m, "sm", handleValue), getBreakpoints(mt, "sm", handleValue), getBreakpoints(mr, "sm", handleValue), getBreakpoints(mb, "sm", handleValue), getBreakpoints(ml, "sm", handleValue), getBreakpoints(p, "sm", handleValue), getBreakpoints(pt, "sm", handleValue), getBreakpoints(pr, "sm", handleValue), getBreakpoints(pb, "sm", handleValue), getBreakpoints(pl, "sm", handleValue), fullWidth ? "100%" : getBreakpoints(width, "sm", handleValue), fullHeight ? "100%" : getBreakpoints(height, "sm", handleValue), getBreakpoints(minWidth, "sm", handleValue), getBreakpoints(maxWidth, "sm", handleValue), getBreakpoints(minHeight, "sm", handleValue), getBreakpoints(maxHeight, "sm", handleValue), theme.breakpoints.md.min, getBreakpoints(display, "md", d => d), getBreakpoints(direction, "md", d => d), getBreakpoints(wrap, "md", w => w), getBreakpoints(justify, "md", getJustify), getBreakpoints(align, "md", getAlign), getBreakpoints(m, "md", handleValue), getBreakpoints(mt, "md", handleValue), getBreakpoints(mr, "md", handleValue), getBreakpoints(mb, "md", handleValue), getBreakpoints(ml, "md", handleValue), getBreakpoints(p, "md", handleValue), getBreakpoints(pt, "md", handleValue), getBreakpoints(pr, "md", handleValue), getBreakpoints(pb, "md", handleValue), getBreakpoints(pl, "md", handleValue), fullWidth ? "100%" : getBreakpoints(width, "md", handleValue), fullHeight ? "100%" : getBreakpoints(height, "md", handleValue), getBreakpoints(minWidth, "md", handleValue), getBreakpoints(maxWidth, "md", handleValue), getBreakpoints(minHeight, "md", handleValue), getBreakpoints(maxHeight, "md", handleValue), theme.breakpoints.lg.min, getBreakpoints(display, "lg", d => d), getBreakpoints(direction, "lg", d => d), getBreakpoints(wrap, "lg", w => w), getBreakpoints(justify, "lg", getJustify), getBreakpoints(align, "lg", getAlign), getBreakpoints(m, "lg", handleValue), getBreakpoints(mt, "lg", handleValue), getBreakpoints(mr, "lg", handleValue), getBreakpoints(mb, "lg", handleValue), getBreakpoints(ml, "lg", handleValue), getBreakpoints(p, "lg", handleValue), getBreakpoints(pt, "lg", handleValue), getBreakpoints(pr, "lg", handleValue), getBreakpoints(pb, "lg", handleValue), getBreakpoints(pl, "lg", handleValue), fullWidth ? "100%" : getBreakpoints(width, "lg", handleValue), fullHeight ? "100%" : getBreakpoints(height, "lg", handleValue), getBreakpoints(minWidth, "lg", handleValue), getBreakpoints(maxWidth, "lg", handleValue), getBreakpoints(minHeight, "lg", handleValue), getBreakpoints(maxHeight, "lg", handleValue), theme.breakpoints.xl.min, getBreakpoints(display, "xl", d => d), getBreakpoints(direction, "xl", d => d), getBreakpoints(wrap, "xl", w => w), getBreakpoints(justify, "xl", getJustify), getBreakpoints(align, "xl", getAlign), getBreakpoints(m, "xl", handleValue), getBreakpoints(mt, "xl", handleValue), getBreakpoints(mr, "xl", handleValue), getBreakpoints(mb, "xl", handleValue), getBreakpoints(ml, "xl", handleValue), getBreakpoints(p, "xl", handleValue), getBreakpoints(pt, "xl", handleValue), getBreakpoints(pr, "xl", handleValue), getBreakpoints(pb, "xl", handleValue), getBreakpoints(pl, "xl", handleValue), fullWidth ? "100%" : getBreakpoints(width, "xl", handleValue), fullHeight ? "100%" : getBreakpoints(height, "xl", handleValue), getBreakpoints(minWidth, "xl", handleValue), getBreakpoints(maxWidth, "xl", handleValue), getBreakpoints(minHeight, "xl", handleValue), getBreakpoints(maxHeight, "xl", handleValue)]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-Container", className) || ""),
      children: children
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      id: "2821631240",
      dynamic: [handleShape(), handleVariantsStyle(), handleBackgroundImage(), clickable ? "cursor: pointer;" : "", handleVariantsBefore(), handleVariantsHover()],
      children: `.Wps-Container.__jsx-style-dynamic-selector{${handleShape()} ${handleVariantsStyle()} ${handleBackgroundImage()} ${clickable ? "cursor: pointer;" : ""} position:relative;-webkit-transition:all 250ms ease 0ms;transition:all 250ms ease 0ms;}.Wps-Container.__jsx-style-dynamic-selector::before{${handleVariantsBefore()};}.Wps-Container.__jsx-style-dynamic-selector:hover{${handleVariantsHover()};}`
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      id: "1412431184",
      dynamic: [getBreakpoints(display, "xs", d => d), getBreakpoints(direction, "xs", d => d), getBreakpoints(wrap, "xs", w => w), getBreakpoints(justify, "xs", getJustify), getBreakpoints(align, "xs", getAlign), getBreakpoints(m, "xs", handleValue), getBreakpoints(mt, "xs", handleValue), getBreakpoints(mr, "xs", handleValue), getBreakpoints(mb, "xs", handleValue), getBreakpoints(ml, "xs", handleValue), getBreakpoints(p, "xs", handleValue), getBreakpoints(pt, "xs", handleValue), getBreakpoints(pr, "xs", handleValue), getBreakpoints(pb, "xs", handleValue), getBreakpoints(pl, "xs", handleValue), fullWidth ? "100%" : getBreakpoints(width, "xs", handleValue), fullHeight ? "100%" : getBreakpoints(height, "xs", handleValue), getBreakpoints(minWidth, "xs", handleValue), getBreakpoints(maxWidth, "xs", handleValue), getBreakpoints(minHeight, "xs", handleValue), getBreakpoints(maxHeight, "xs", handleValue), theme.breakpoints.sm.min, getBreakpoints(display, "sm", d => d), getBreakpoints(direction, "sm", d => d), getBreakpoints(wrap, "sm", w => w), getBreakpoints(justify, "sm", getJustify), getBreakpoints(align, "sm", getAlign), getBreakpoints(m, "sm", handleValue), getBreakpoints(mt, "sm", handleValue), getBreakpoints(mr, "sm", handleValue), getBreakpoints(mb, "sm", handleValue), getBreakpoints(ml, "sm", handleValue), getBreakpoints(p, "sm", handleValue), getBreakpoints(pt, "sm", handleValue), getBreakpoints(pr, "sm", handleValue), getBreakpoints(pb, "sm", handleValue), getBreakpoints(pl, "sm", handleValue), fullWidth ? "100%" : getBreakpoints(width, "sm", handleValue), fullHeight ? "100%" : getBreakpoints(height, "sm", handleValue), getBreakpoints(minWidth, "sm", handleValue), getBreakpoints(maxWidth, "sm", handleValue), getBreakpoints(minHeight, "sm", handleValue), getBreakpoints(maxHeight, "sm", handleValue), theme.breakpoints.md.min, getBreakpoints(display, "md", d => d), getBreakpoints(direction, "md", d => d), getBreakpoints(wrap, "md", w => w), getBreakpoints(justify, "md", getJustify), getBreakpoints(align, "md", getAlign), getBreakpoints(m, "md", handleValue), getBreakpoints(mt, "md", handleValue), getBreakpoints(mr, "md", handleValue), getBreakpoints(mb, "md", handleValue), getBreakpoints(ml, "md", handleValue), getBreakpoints(p, "md", handleValue), getBreakpoints(pt, "md", handleValue), getBreakpoints(pr, "md", handleValue), getBreakpoints(pb, "md", handleValue), getBreakpoints(pl, "md", handleValue), fullWidth ? "100%" : getBreakpoints(width, "md", handleValue), fullHeight ? "100%" : getBreakpoints(height, "md", handleValue), getBreakpoints(minWidth, "md", handleValue), getBreakpoints(maxWidth, "md", handleValue), getBreakpoints(minHeight, "md", handleValue), getBreakpoints(maxHeight, "md", handleValue), theme.breakpoints.lg.min, getBreakpoints(display, "lg", d => d), getBreakpoints(direction, "lg", d => d), getBreakpoints(wrap, "lg", w => w), getBreakpoints(justify, "lg", getJustify), getBreakpoints(align, "lg", getAlign), getBreakpoints(m, "lg", handleValue), getBreakpoints(mt, "lg", handleValue), getBreakpoints(mr, "lg", handleValue), getBreakpoints(mb, "lg", handleValue), getBreakpoints(ml, "lg", handleValue), getBreakpoints(p, "lg", handleValue), getBreakpoints(pt, "lg", handleValue), getBreakpoints(pr, "lg", handleValue), getBreakpoints(pb, "lg", handleValue), getBreakpoints(pl, "lg", handleValue), fullWidth ? "100%" : getBreakpoints(width, "lg", handleValue), fullHeight ? "100%" : getBreakpoints(height, "lg", handleValue), getBreakpoints(minWidth, "lg", handleValue), getBreakpoints(maxWidth, "lg", handleValue), getBreakpoints(minHeight, "lg", handleValue), getBreakpoints(maxHeight, "lg", handleValue), theme.breakpoints.xl.min, getBreakpoints(display, "xl", d => d), getBreakpoints(direction, "xl", d => d), getBreakpoints(wrap, "xl", w => w), getBreakpoints(justify, "xl", getJustify), getBreakpoints(align, "xl", getAlign), getBreakpoints(m, "xl", handleValue), getBreakpoints(mt, "xl", handleValue), getBreakpoints(mr, "xl", handleValue), getBreakpoints(mb, "xl", handleValue), getBreakpoints(ml, "xl", handleValue), getBreakpoints(p, "xl", handleValue), getBreakpoints(pt, "xl", handleValue), getBreakpoints(pr, "xl", handleValue), getBreakpoints(pb, "xl", handleValue), getBreakpoints(pl, "xl", handleValue), fullWidth ? "100%" : getBreakpoints(width, "xl", handleValue), fullHeight ? "100%" : getBreakpoints(height, "xl", handleValue), getBreakpoints(minWidth, "xl", handleValue), getBreakpoints(maxWidth, "xl", handleValue), getBreakpoints(minHeight, "xl", handleValue), getBreakpoints(maxHeight, "xl", handleValue)],
      children: `.Wps-Container.__jsx-style-dynamic-selector{display:${getBreakpoints(display, "xs", d => d)};-webkit-flex-direction:${getBreakpoints(direction, "xs", d => d)};-ms-flex-direction:${getBreakpoints(direction, "xs", d => d)};flex-direction:${getBreakpoints(direction, "xs", d => d)};-webkit-flex-wrap:${getBreakpoints(wrap, "xs", w => w)};-ms-flex-wrap:${getBreakpoints(wrap, "xs", w => w)};flex-wrap:${getBreakpoints(wrap, "xs", w => w)};-webkit-box-pack:${getBreakpoints(justify, "xs", getJustify)};-webkit-justify-content:${getBreakpoints(justify, "xs", getJustify)};-ms-flex-pack:${getBreakpoints(justify, "xs", getJustify)};justify-content:${getBreakpoints(justify, "xs", getJustify)};-webkit-align-items:${getBreakpoints(align, "xs", getAlign)};-webkit-box-align:${getBreakpoints(align, "xs", getAlign)};-ms-flex-align:${getBreakpoints(align, "xs", getAlign)};align-items:${getBreakpoints(align, "xs", getAlign)};margin:${getBreakpoints(m, "xs", handleValue)};margin-top:${getBreakpoints(mt, "xs", handleValue)};margin-right:${getBreakpoints(mr, "xs", handleValue)};margin-bottom:${getBreakpoints(mb, "xs", handleValue)};margin-left:${getBreakpoints(ml, "xs", handleValue)};padding:${getBreakpoints(p, "xs", handleValue)};padding-top:${getBreakpoints(pt, "xs", handleValue)};padding-right:${getBreakpoints(pr, "xs", handleValue)};padding-bottom:${getBreakpoints(pb, "xs", handleValue)};padding-left:${getBreakpoints(pl, "xs", handleValue)};width:${fullWidth ? "100%" : getBreakpoints(width, "xs", handleValue)};height:${fullHeight ? "100%" : getBreakpoints(height, "xs", handleValue)};min-width:${getBreakpoints(minWidth, "xs", handleValue)};max-width:${getBreakpoints(maxWidth, "xs", handleValue)};min-height:${getBreakpoints(minHeight, "xs", handleValue)};max-height:${getBreakpoints(maxHeight, "xs", handleValue)};}@media only screen and (min-width:${theme.breakpoints.sm.min}){.Wps-Container.__jsx-style-dynamic-selector{display:${getBreakpoints(display, "sm", d => d)};-webkit-flex-direction:${getBreakpoints(direction, "sm", d => d)};-ms-flex-direction:${getBreakpoints(direction, "sm", d => d)};flex-direction:${getBreakpoints(direction, "sm", d => d)};-webkit-flex-wrap:${getBreakpoints(wrap, "sm", w => w)};-ms-flex-wrap:${getBreakpoints(wrap, "sm", w => w)};flex-wrap:${getBreakpoints(wrap, "sm", w => w)};-webkit-box-pack:${getBreakpoints(justify, "sm", getJustify)};-webkit-justify-content:${getBreakpoints(justify, "sm", getJustify)};-ms-flex-pack:${getBreakpoints(justify, "sm", getJustify)};justify-content:${getBreakpoints(justify, "sm", getJustify)};-webkit-align-items:${getBreakpoints(align, "sm", getAlign)};-webkit-box-align:${getBreakpoints(align, "sm", getAlign)};-ms-flex-align:${getBreakpoints(align, "sm", getAlign)};align-items:${getBreakpoints(align, "sm", getAlign)};margin:${getBreakpoints(m, "sm", handleValue)};margin-top:${getBreakpoints(mt, "sm", handleValue)};margin-right:${getBreakpoints(mr, "sm", handleValue)};margin-bottom:${getBreakpoints(mb, "sm", handleValue)};margin-left:${getBreakpoints(ml, "sm", handleValue)};padding:${getBreakpoints(p, "sm", handleValue)};padding-top:${getBreakpoints(pt, "sm", handleValue)};padding-right:${getBreakpoints(pr, "sm", handleValue)};padding-bottom:${getBreakpoints(pb, "sm", handleValue)};padding-left:${getBreakpoints(pl, "sm", handleValue)};width:${fullWidth ? "100%" : getBreakpoints(width, "sm", handleValue)};height:${fullHeight ? "100%" : getBreakpoints(height, "sm", handleValue)};min-width:${getBreakpoints(minWidth, "sm", handleValue)};max-width:${getBreakpoints(maxWidth, "sm", handleValue)};min-height:${getBreakpoints(minHeight, "sm", handleValue)};max-height:${getBreakpoints(maxHeight, "sm", handleValue)};}}@media only screen and (min-width:${theme.breakpoints.md.min}){.Wps-Container.__jsx-style-dynamic-selector{display:${getBreakpoints(display, "md", d => d)};-webkit-flex-direction:${getBreakpoints(direction, "md", d => d)};-ms-flex-direction:${getBreakpoints(direction, "md", d => d)};flex-direction:${getBreakpoints(direction, "md", d => d)};-webkit-flex-wrap:${getBreakpoints(wrap, "md", w => w)};-ms-flex-wrap:${getBreakpoints(wrap, "md", w => w)};flex-wrap:${getBreakpoints(wrap, "md", w => w)};-webkit-box-pack:${getBreakpoints(justify, "md", getJustify)};-webkit-justify-content:${getBreakpoints(justify, "md", getJustify)};-ms-flex-pack:${getBreakpoints(justify, "md", getJustify)};justify-content:${getBreakpoints(justify, "md", getJustify)};-webkit-align-items:${getBreakpoints(align, "md", getAlign)};-webkit-box-align:${getBreakpoints(align, "md", getAlign)};-ms-flex-align:${getBreakpoints(align, "md", getAlign)};align-items:${getBreakpoints(align, "md", getAlign)};margin:${getBreakpoints(m, "md", handleValue)};margin-top:${getBreakpoints(mt, "md", handleValue)};margin-right:${getBreakpoints(mr, "md", handleValue)};margin-bottom:${getBreakpoints(mb, "md", handleValue)};margin-left:${getBreakpoints(ml, "md", handleValue)};padding:${getBreakpoints(p, "md", handleValue)};padding-top:${getBreakpoints(pt, "md", handleValue)};padding-right:${getBreakpoints(pr, "md", handleValue)};padding-bottom:${getBreakpoints(pb, "md", handleValue)};padding-left:${getBreakpoints(pl, "md", handleValue)};width:${fullWidth ? "100%" : getBreakpoints(width, "md", handleValue)};height:${fullHeight ? "100%" : getBreakpoints(height, "md", handleValue)};min-width:${getBreakpoints(minWidth, "md", handleValue)};max-width:${getBreakpoints(maxWidth, "md", handleValue)};min-height:${getBreakpoints(minHeight, "md", handleValue)};max-height:${getBreakpoints(maxHeight, "md", handleValue)};}}@media only screen and (min-width:${theme.breakpoints.lg.min}){.Wps-Container.__jsx-style-dynamic-selector{display:${getBreakpoints(display, "lg", d => d)};-webkit-flex-direction:${getBreakpoints(direction, "lg", d => d)};-ms-flex-direction:${getBreakpoints(direction, "lg", d => d)};flex-direction:${getBreakpoints(direction, "lg", d => d)};-webkit-flex-wrap:${getBreakpoints(wrap, "lg", w => w)};-ms-flex-wrap:${getBreakpoints(wrap, "lg", w => w)};flex-wrap:${getBreakpoints(wrap, "lg", w => w)};-webkit-box-pack:${getBreakpoints(justify, "lg", getJustify)};-webkit-justify-content:${getBreakpoints(justify, "lg", getJustify)};-ms-flex-pack:${getBreakpoints(justify, "lg", getJustify)};justify-content:${getBreakpoints(justify, "lg", getJustify)};-webkit-align-items:${getBreakpoints(align, "lg", getAlign)};-webkit-box-align:${getBreakpoints(align, "lg", getAlign)};-ms-flex-align:${getBreakpoints(align, "lg", getAlign)};align-items:${getBreakpoints(align, "lg", getAlign)};margin:${getBreakpoints(m, "lg", handleValue)};margin-top:${getBreakpoints(mt, "lg", handleValue)};margin-right:${getBreakpoints(mr, "lg", handleValue)};margin-bottom:${getBreakpoints(mb, "lg", handleValue)};margin-left:${getBreakpoints(ml, "lg", handleValue)};padding:${getBreakpoints(p, "lg", handleValue)};padding-top:${getBreakpoints(pt, "lg", handleValue)};padding-right:${getBreakpoints(pr, "lg", handleValue)};padding-bottom:${getBreakpoints(pb, "lg", handleValue)};padding-left:${getBreakpoints(pl, "lg", handleValue)};width:${fullWidth ? "100%" : getBreakpoints(width, "lg", handleValue)};height:${fullHeight ? "100%" : getBreakpoints(height, "lg", handleValue)};min-width:${getBreakpoints(minWidth, "lg", handleValue)};max-width:${getBreakpoints(maxWidth, "lg", handleValue)};min-height:${getBreakpoints(minHeight, "lg", handleValue)};max-height:${getBreakpoints(maxHeight, "lg", handleValue)};}}@media only screen and (min-width:${theme.breakpoints.xl.min}){.Wps-Container.__jsx-style-dynamic-selector{display:${getBreakpoints(display, "xl", d => d)};-webkit-flex-direction:${getBreakpoints(direction, "xl", d => d)};-ms-flex-direction:${getBreakpoints(direction, "xl", d => d)};flex-direction:${getBreakpoints(direction, "xl", d => d)};-webkit-flex-wrap:${getBreakpoints(wrap, "xl", w => w)};-ms-flex-wrap:${getBreakpoints(wrap, "xl", w => w)};flex-wrap:${getBreakpoints(wrap, "xl", w => w)};-webkit-box-pack:${getBreakpoints(justify, "xl", getJustify)};-webkit-justify-content:${getBreakpoints(justify, "xl", getJustify)};-ms-flex-pack:${getBreakpoints(justify, "xl", getJustify)};justify-content:${getBreakpoints(justify, "xl", getJustify)};-webkit-align-items:${getBreakpoints(align, "xl", getAlign)};-webkit-box-align:${getBreakpoints(align, "xl", getAlign)};-ms-flex-align:${getBreakpoints(align, "xl", getAlign)};align-items:${getBreakpoints(align, "xl", getAlign)};margin:${getBreakpoints(m, "xl", handleValue)};margin-top:${getBreakpoints(mt, "xl", handleValue)};margin-right:${getBreakpoints(mr, "xl", handleValue)};margin-bottom:${getBreakpoints(mb, "xl", handleValue)};margin-left:${getBreakpoints(ml, "xl", handleValue)};padding:${getBreakpoints(p, "xl", handleValue)};padding-top:${getBreakpoints(pt, "xl", handleValue)};padding-right:${getBreakpoints(pr, "xl", handleValue)};padding-bottom:${getBreakpoints(pb, "xl", handleValue)};padding-left:${getBreakpoints(pl, "xl", handleValue)};width:${fullWidth ? "100%" : getBreakpoints(width, "xl", handleValue)};height:${fullHeight ? "100%" : getBreakpoints(height, "xl", handleValue)};min-width:${getBreakpoints(minWidth, "xl", handleValue)};max-width:${getBreakpoints(maxWidth, "xl", handleValue)};min-height:${getBreakpoints(minHeight, "xl", handleValue)};max-height:${getBreakpoints(maxHeight, "xl", handleValue)};}}`
    })]
  });
}); // const styles = (content) => {
//   return css`
//     ${content}
//   `;
// };