import _defineProperty from "@babel/runtime/helpers/defineProperty";
import makeStyles from "../../styles/makeStyles";

var styles = function styles(_ref) {
  var _content;

  var _ref$cleverUI = _ref.cleverUI,
      colors = _ref$cleverUI.colors,
      spaces = _ref$cleverUI.spaces,
      breakpoints = _ref$cleverUI.breakpoints;
  return {
    iconButtonFix: {
      display: "flex",
      placeItems: "center"
    },
    overlay: {
      overflow: "hidden",
      zIndex: 1300,
      // move to theme
      inset: "0",
      position: "fixed",
      display: "flex"
    },
    wrapper: {
      padding: "".concat(spaces.xl),
      boxSizing: "border-box",
      display: "flex",
      flexDirection: "column",
      flexGrow: "1",
      overflowY: "auto",
      "--cle-dialog-wrapper-spacing-botom": "8px",
      marginBottom: "var(--cle-dialog-wrapper-spacing-botom)",
      paddingBottom: "calc(".concat(spaces.xl, " - var(--cle-dialog-wrapper-spacing-botom))")
    },
    wrapperInner: {
      display: "flex",
      flexDirection: "column",
      width: "100%",
      height: "100%",
      maxWidth: "var(--cle-dialog-wrapper-inner-max-width)",
      marginInline: "auto",
      marginBottom: "-24px",
      paddingBottom: "24px"
    },
    content: (_content = {
      display: "flex",
      flexDirection: "column",
      height: "auto",
      "marginInline": spaces.lg,
      maxHeight: "80vh",
      "--cle-dialog-max-width": "100%",
      "--cle-dialog-width-multiplier": "calc(1 + (var(--cle-dialog-dialog-position) * 0.2))",
      maxWidth: "calc(var(--cle-dialog-max-width) * var(--cle-dialog-width-multiplier))",
      width: "calc(100% - ".concat(spaces.lg, " * 2)")
    }, _defineProperty(_content, breakpoints.up("sm"), {
      "--cle-dialog-max-width": "60%",
      marginInline: "auto",
      width: "revert"
    }), _defineProperty(_content, breakpoints.up("md"), {
      "--cle-dialog-max-width": "max(576px, calc(1em * 48))"
    }), _defineProperty(_content, "margin", "auto"), _defineProperty(_content, "background", colors.white[500]), _defineProperty(_content, "boxSizing", "border-box"), _defineProperty(_content, "--cle-dialog-border-radius", "12px"), _defineProperty(_content, "borderRadius", "var(--cle-dialog-border-radius)"), _defineProperty(_content, "boxShadow", "0 4px 32px rgba(0,0,0,0.15)"), _content),
    noMaxWidth: {
      maxWidth: "unset",
      width: "var(--cle-dialog-global-width)"
    },
    larged: _defineProperty({
      "--cle-dialog-margin-top": spaces["4xl"],
      width: "100%",
      height: "calc(100% - var(--cle-dialog-margin-top))",
      maxHeight: "revert",
      marginTop: "var(--cle-dialog-margin-top)",
      marginInline: "auto",
      borderRadius: "var(--cle-dialog-border-radius) var(--cle-dialog-border-radius) 0 0"
    }, breakpoints.up("sm"), {
      maxWidth: "80%",
      "--cle-dialog-margin-top": spaces.xl,
      marginTop: "var(--cle-dialog-margin-top)",
      marginBottom: "var(--cle-dialog-margin-top)",
      borderRadius: "var(--cle-dialog-border-radius)",
      height: "calc(100% - calc(var(--cle-dialog-margin-top) * 2))"
    })
  };
};

export default makeStyles(styles);