import _defineProperty from "@babel/runtime/helpers/defineProperty";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

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

var styles = function styles(_ref) {
  var _ref$cleverUI = _ref.cleverUI,
      colors = _ref$cleverUI.colors,
      spaces = _ref$cleverUI.spaces;
  return {
    root: function root(_ref2) {
      var onClick = _ref2.onClick;
      return _objectSpread(_objectSpread({
        padding: 0,
        display: "flex",
        height: 54,
        border: "none",
        backgroundColor: "transparent"
      }, onClick && {
        cursor: "pointer"
      }), {}, {
        "-webkit-appearance": "none",
        "& *": {
          boxSizing: "border-box"
        }
      });
    },
    title: {
      lineHeight: 1.5
    },
    caption: {
      lineHeight: 1.25
    },
    content: {
      paddingRight: "16px",
      marginLeft: "-25px",
      width: "fit-content",
      height: "inherit"
    },
    greenBadge: {
      "& div": {
        backgroundColor: colors.green[50],
        "& p": {
          color: colors.green[500]
        },
        "& div": {
          border: "2px solid ".concat(colors.green[500]),
          "& svg": {
            color: colors.green[500]
          }
        }
      }
    },
    blueBadge: {
      "& div": {
        backgroundColor: colors.blue[50],
        "& p": {
          color: colors.blue[500]
        },
        "& div": {
          border: "2px solid ".concat(colors.blue[500]),
          "& svg": {
            color: colors.blue[500]
          }
        }
      }
    },
    yellowBadge: {
      "& div": {
        backgroundColor: colors.yellow[50],
        "& p": {
          color: colors.yellow[700]
        },
        "& div": {
          border: "2px solid ".concat(colors.yellow[700]),
          "& svg": {
            color: colors.yellow[700]
          }
        }
      }
    },
    orangeBadge: {
      "& div": {
        backgroundColor: "#FFF0E5",
        "& p": {
          color: "#4D260A"
        },
        "& div": {
          border: "2px solid ".concat("#4D260A"),
          "& svg": {
            color: "#4D260A"
          }
        }
      }
    },
    neutralBadge: {
      "& div": {
        backgroundColor: colors.neutral[200],
        "& p": {
          color: colors.neutral[800]
        },
        "& div": {
          border: "2px solid ".concat(colors.neutral[800]),
          "& svg": {
            color: colors.neutral[800]
          }
        }
      }
    },
    circle: {
      width: 54,
      height: 54,
      borderTopLeftRadius: "50%",
      borderBottomLeftRadius: "50%"
    },
    iconContainer: {
      height: "100%",
      paddingTop: spaces.sm,
      paddingBottom: spaces.sm,
      paddingRight: spaces.sm
    },
    iconCircle: function iconCircle(_ref3) {
      var color = _ref3.color;
      return {
        borderRadius: "50%",
        backgroundColor: colors[color][50],
        padding: spaces.sm
      };
    }
  };
};

export default makeStyles(styles);