import makeStyles from "../styles/makeStyles";
var styles = makeStyles(function (_ref) {
  var _ref$cleverUI = _ref.cleverUI,
      colors = _ref$cleverUI.colors,
      spaces = _ref$cleverUI.spaces;
  return {
    card: function card(_ref2) {
      var borderColor = _ref2.borderColor,
          borderShade = _ref2.borderShade;
      return {
        borderColor: colors[borderColor][borderShade],
        borderWidth: "2px",
        boxSizing: "border-box",
        padding: "0px",
        isolation: "isolate"
      };
    },
    container: {
      padding: spaces.xl
    },
    "@keyframes ripple": {
      "0%": {
        boxShadow: "inset 0 0 0 12px currentColor"
      },
      "100%": {
        transform: "scale(3)",
        boxShadow: "inset 0 0 0 0 currentColor"
      }
    },
    wrapper: {
      height: "12px",
      width: "12px",
      position: "relative"
    },
    dot: {
      height: "100%",
      width: "100%",
      backgroundColor: colors.secondary[500],
      borderRadius: "50%",
      position: "relative",
      zIndex: 1
    },
    ripple: {
      position: "absolute",
      top: 0,
      right: 0,
      color: colors.secondary[50],
      height: "100%",
      width: "100%",
      borderRadius: "50%",
      animation: "$ripple 1600ms infinite 800ms cubic-bezier(0.64, 0.42, 0.54, 1)",
      "&:last-child": {
        animationDelay: "-1600ms"
      },
      "@media (prefers-reduced-motion)": {
        animationPlayState: "paused",
        animationDelay: "-1400ms",
        "&:last-child": {
          animationDelay: "-800ms"
        }
      }
    },
    image: function image(_ref3) {
      var isMobile = _ref3.isMobile;
      return {
        display: isMobile ? "flex" : "",
        maxWidth: "270px",
        marginTop: isMobile ? "" : "auto",
        maxHeight: "120px",
        marginBottom: isMobile ? "" : "auto"
      };
    },
    imageItem: {
      margin: "auto",
      textAlign: "center"
    }
  };
});
export default styles;