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

var styles = function styles(_ref) {
  var _ref$cleverUI = _ref.cleverUI,
      shadows = _ref$cleverUI.shadows,
      borderRadius = _ref$cleverUI.borderRadius,
      typography = _ref$cleverUI.typography,
      colors = _ref$cleverUI.colors,
      spaces = _ref$cleverUI.spaces;
  return {
    "@keyframes slideUpAndFade": {
      "0%": {
        opacity: 0,
        transform: "translateY(2px)"
      },
      "100%": {
        opacity: 1,
        transform: "translateY(0)"
      }
    },
    "@keyframes slideRightAndFade": {
      "0%": {
        opacity: 0,
        transform: "translateX(-2px)"
      },
      "100%": {
        opacity: 1,
        transform: "translateX(0)"
      }
    },
    "@keyframes slideDownAndFade": {
      "0%": {
        opacity: 0,
        transform: "translateY(-2px)"
      },
      "100%": {
        opacity: 1,
        transform: "translateY(0)"
      }
    },
    "@keyframes slideLeftAndFade": {
      "0%": {
        opacity: 0,
        transform: "translateX(2px)"
      },
      "100%": {
        opacity: 1,
        transform: "translateX(0)"
      }
    },
    tooltipContent: {
      padding: "".concat(spaces.sm, " ").concat(spaces.md),
      borderRadius: borderRadius.normal,
      background: colors.navyBlue[500],
      filter: "drop-shadow(".concat(shadows.normal, ")"),
      fontFamily: typography.font1,
      fontSize: 12,
      fontWeight: 500,
      color: colors.neutral[0],
      textAlign: "center",
      userSelect: "none",
      animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
      willChange: "transform, opacity",
      zIndex: "1500",
      "&[data-state='delayed-open'][data-side='top'], &[data-state='instant-open'][data-side='top']": {
        "animation": "$slideDownAndFade 300ms"
      },
      "&[data-state='delayed-open'][data-side='right'], &[data-state='instant-open'][data-side='right']": {
        "animation": "$slideLeftAndFade 300ms"
      },
      "&[data-state='delayed-open'][data-side='bottom'], &[data-state='instant-open'][data-side='bottom']": {
        "animation": "$slideUpAndFade 300ms"
      },
      "&[data-state='delayed-open'][data-side='left'], &[data-state='instant-open'][data-side='left']": {
        "animation": "$slideRightAndFade 300ms"
      }
    },
    tooltipArrow: {
      "fill": colors.navyBlue[500]
    },
    tooltipTrigger: {
      "-webkit-appearance": "none",
      border: "none",
      backgroundColor: "transparent",
      padding: 0 // lineHeight: 0,

    }
  };
};

export default makeStyles(styles);