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

var styles = function styles(_ref) {
  var _ref$cleverUI = _ref.cleverUI,
      colors = _ref$cleverUI.colors,
      transitions = _ref$cleverUI.transitions;
  return {
    root: function root(_ref2) {
      var color = _ref2.color;
      return {
        backgroundColor: "transparent",
        color: colors[color][500],
        margin: 0,
        padding: 0,
        cursor: "pointer",
        border: 0,
        transition: "color ".concat(transitions.duration["short"]),
        "&:hover": {
          color: colors[color][700]
        }
      };
    },
    icon: {
      display: "block"
    }
  };
};

var getClasses = makeStyles(styles);

var ChipIconButton = function ChipIconButton(props) {
  var icon = props.icon,
      color = props.color,
      onClick = props.onClick;
  var classes = getClasses({
    color: color
  });
  return /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: classes.root,
    onClick: onClick
  }, /*#__PURE__*/React.cloneElement(icon, {
    color: "currentColor",
    className: classes.icon
  }));
};

export default ChipIconButton;