import makeStyles from "../../styles/makeStyles";
var getClasses = makeStyles(function (_ref) {
  var _ref$cleverUI = _ref.cleverUI,
      spaces = _ref$cleverUI.spaces,
      colors = _ref$cleverUI.colors,
      shadows = _ref$cleverUI.shadows,
      borderRadius = _ref$cleverUI.borderRadius,
      transitions = _ref$cleverUI.transitions;
  return {
    content: {
      padding: spaces.sm,
      backgroundColor: colors.white[500],
      filter: "drop-shadow(".concat(shadows.normal, ")"),
      borderRadius: borderRadius.normal,
      boxSizing: "border-box",
      "& *": {
        boxSizing: "border-box"
      }
    },
    item: function item(_ref2) {
      var _colors$color$shade, _colors$color;

      var color = _ref2.color,
          shade = _ref2.shade,
          justifyContent = _ref2.justifyContent;
      return {
        display: "flex",
        gap: spaces.xs,
        alignItems: "center",
        justifyContent: justifyContent,
        padding: "".concat(spaces.xs, " ").concat(spaces.sm),
        color: (_colors$color$shade = (_colors$color = colors[color]) === null || _colors$color === void 0 ? void 0 : _colors$color[shade]) !== null && _colors$color$shade !== void 0 ? _colors$color$shade : colors.neutral[500],
        cursor: "pointer",
        borderRadius: borderRadius.normal,
        transition: "background-color ".concat(transitions.duration["short"]),
        "&:hover": {
          backgroundColor: colors.neutral[100],
          outline: 0
        },
        "&:focus": {
          backgroundColor: colors.neutral[100]
        }
      };
    },
    divider: {
      width: "calc(100% - ".concat(spaces.sm, " * 2)"),
      border: 0,
      height: "1px",
      backgroundColor: colors.neutral[300],
      margin: "".concat(spaces.sm)
    },
    arrow: {
      fill: colors.white[500]
    }
  };
});
export default getClasses;