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

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

  var _ref$cleverUI = _ref.cleverUI,
      colors = _ref$cleverUI.colors,
      spaces = _ref$cleverUI.spaces,
      breakpoints = _ref$cleverUI.breakpoints;
  return {
    overlay: {
      backgroundColor: "rgba(0,0,0, .5)",
      overflow: "hidden",
      display: "flex",
      zIndex: 100,
      // move to theme
      inset: "0",
      position: "fixed"
    },
    content: (_content = {
      display: "flex",
      flexDirection: "column",
      margin: "auto",
      maxHeight: "80vh",
      width: "calc(100% - ".concat(spaces["2xl"], ")"),
      maxWidth: "400px",
      background: colors.white[500],
      // padding: top right bottom left;
      padding: "".concat(spaces["2xl"], " ").concat(spaces.xl, " ").concat(spaces.xl, " ").concat(spaces.xl),
      outline: "none",
      boxSizing: "border-box",
      borderRadius: "12px",
      // move to theme borderRadius.large
      boxShadow: "0 4px 32px rgba(0,0,0,0.15)"
    }, _defineProperty(_content, breakpoints.up("sm"), {
      padding: spaces.xl
    }), _defineProperty(_content, breakpoints.up("sm"), {
      maxWidth: "576px"
    }), _defineProperty(_content, breakpoints.down("sm"), {
      // padding: top right bottom left;
      padding: "".concat(spaces.xl, " ").concat(spaces.lg, " ").concat(spaces.lg, " ").concat(spaces.lg)
    }), _content),
    large: (_large = {}, _defineProperty(_large, breakpoints.up("sm"), {
      maxWidth: "864px"
    }), _defineProperty(_large, breakpoints.up("md"), {
      maxWidth: "1008px"
    }), _large)
  };
};

export default makeStyles(styles);