import makeStyles from "../../styles/makeStyles";

var styles = function styles(_ref) {
  var _ref$cleverUI = _ref.cleverUI,
      colors = _ref$cleverUI.colors,
      borderRadius = _ref$cleverUI.borderRadius,
      transitions = _ref$cleverUI.transitions;
  return {
    root: {
      padding: 0,
      display: "inline-block",
      border: "none",
      borderRadius: borderRadius.normal,
      color: colors.neutral[400],
      backgroundColor: "transparent",
      transitionDuration: transitions.duration["short"],
      transitionProperty: "color",
      lineHeight: 0,
      "&:hover": {
        color: colors.neutral[700]
      },
      "&:disabled": {
        color: colors.neutral[300]
      },
      "&:not(:disabled)": {
        cursor: "pointer"
      }
    },
    primaryColor: {
      color: colors.primary[500],
      "&:hover": {
        color: colors.primary[700]
      },
      "&:disabled": {
        color: colors.primary[300]
      }
    },
    dangerColor: {
      color: colors.danger[500],
      "&:hover": {
        color: colors.danger[700]
      },
      "&:disabled": {
        color: colors.danger[300]
      }
    }
  };
};

export default makeStyles(styles);