import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from "react";
import cx from "classnames";
import makeStyles from "clever-react/ui/styles/makeStyles";
import { useLayout } from "..";
import { modes } from "../LayoutContext";
var getClasses = makeStyles(function (_ref) {
  var spaces = _ref.cleverUI.spaces,
      breakpoints = _ref.breakpoints;
  return {
    scroll: function scroll(_ref2) {
      var collapse = _ref2.collapse;
      return _defineProperty({
        isolation: "isolate",
        zIndex: 1,
        padding: collapse ? "0px ".concat(spaces["2xl"], " ").concat(spaces["2xl"], " ").concat(spaces["2xl"]) : spaces["2xl"],
        height: "calc(100vh - var(--layout-header-height))",
        boxSizing: "border-box"
      }, breakpoints.down("md"), {
        WebkitOverflowScrolling: "touch",
        overflow: "auto"
      });
    }
  };
});

var Content = function Content(_ref4) {
  var children = _ref4.children,
      _ref4$className = _ref4.className,
      className = _ref4$className === void 0 ? null : _ref4$className;

  var _useLayout = useLayout(),
      mode = _useLayout.mode;

  var classes = getClasses({
    collapse: modes.popover === mode
  });
  return /*#__PURE__*/React.createElement("div", {
    className: cx(classes.scroll, className)
  }, children);
};

export default Content;