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 {
    "@global": {
      ":root": {
        "--cle-collapse-trigger-size": "32px"
      }
    },
    button: {
      padding: 0,
      border: "none",
      display: "inline-grid",
      placeItems: "center",
      height: "var(--cle-collapse-trigger-size)",
      width: "var(--cle-collapse-trigger-size)",
      borderRadius: borderRadius.normal,
      transitionDuration: transitions.duration["short"],
      transitionProperty: "color",
      backgroundColor: colors.primary[300],
      color: colors.primary[900],
      cursor: "pointer",
      "&:hover": {
        color: colors.primary[700]
      },
      "&:focus:not(:focus-within)": {
        outline: "none"
      },
      "&:disabled": {
        color: colors.neutral[400],
        backgroundColor: colors.neutral[300]
      }
    },
    icon: {
      transform: "rotate(90deg)",
      transition: "transform ".concat(transitions.duration["short"])
    },
    iconCollapsed: {
      transform: "rotate(-90deg)"
    }
  };
};

export default makeStyles(styles);