import _defineProperty from "@babel/runtime/helpers/defineProperty";
import makeStyles from "clever-react/ui/styles/makeStyles";

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

  var _ref$cleverUI = _ref.cleverUI,
      colors = _ref$cleverUI.colors,
      shadows = _ref$cleverUI.shadows,
      spaces = _ref$cleverUI.spaces,
      breakpoints = _ref.breakpoints;
  return {
    root: {
      flex: "0 0 var(--layout-bar-width)",
      position: "relative",
      "&:hover $buttonCollapse": {
        opacity: 1
      }
    },
    staticContainer: {
      backgroundColor: "#ffffff",
      height: "100%"
    },
    floatContainer: (_floatContainer = {
      position: "absolute",
      top: "calc(100% + 8px)",
      width: "340px",
      maxWidth: "calc(100vw - 24px)",
      filter: "drop-shadow(".concat(shadows.normal, ")"),
      left: "0",
      borderRadius: "8px",
      transform: "translateX(-4px)",
      height: "calc(100vh - 80px)",
      maxHeight: "800px",
      backgroundColor: "#ffffff"
    }, _defineProperty(_floatContainer, breakpoints.down("lg"), {
      height: "calc(100vh - 100px)"
    }), _defineProperty(_floatContainer, "& > div", {
      borderRadius: "8px"
    }), _defineProperty(_floatContainer, "&::before", {
      content: "\"\"",
      display: "block",
      width: "0",
      height: "0",
      borderStyle: "solid",
      borderWidth: "0 12px 12px 12px",
      borderColor: "transparent transparent #ffffff transparent",
      position: "absolute",
      top: "-12px",
      left: "24px",
      transform: "translateX(-50%)"
    }), _floatContainer),
    iconMenu: function iconMenu(_ref2) {
      var isOpen = _ref2.isOpen;
      return {
        border: 0,
        backgroundColor: "#ffffff",
        width: "40px",
        height: "40px",
        display: "grid",
        alignItems: "center",
        justifyContent: "center",
        borderRadius: "50%",
        outline: 0,
        cursor: "pointer",
        color: colors.neutral[500],
        boxShadow: isOpen ? "none" : shadows.normal,
        "&:hover": {
          color: colors.primary[500]
        }
      };
    },
    buttonCollapse: function buttonCollapse(_ref3) {
      var collapse = _ref3.collapse;
      return {
        backgroundColor: "transparent",
        border: 0,
        width: "40px",
        height: "40px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        borderRadius: "50%",
        outline: 0,
        position: "absolute",
        top: 20,
        right: 20,
        transform: collapse ? "scaleX(-1)" : "",
        transition: "opacity .2s",
        cursor: "pointer",
        opacity: 0,
        color: colors.neutral[500],
        "&:hover": {
          color: colors.primary[500]
        },
        "& svg": {
          transform: "scaleX(-1) translateX(1px)"
        }
      };
    }
  };
};

export default makeStyles(styles);