import makeStyles from "../../ui/styles/makeStyles";
var styles = makeStyles(function (_ref) {
  var _ref$cleverUI = _ref.cleverUI,
      colors = _ref$cleverUI.colors,
      spaces = _ref$cleverUI.spaces;
  return {
    "@global": {
      ":root": {
        "--intro-cards-move-button-size": "40px"
      }
    },
    root: {
      position: "relative",
      maxHeight: "90vh"
    },
    circleButton: {
      width: "10px",
      height: "10px",
      margin: "0",
      border: "1px solid ".concat(colors.blue[500]),
      padding: "0",
      borderRadius: "50px",
      backgroundColor: "".concat(colors.blue[50]),
      cursor: "pointer"
    },
    selected: {
      backgroundColor: "".concat(colors.blue[500]),
      height: "16px",
      width: "16px"
    },
    iconButton: {
      backgroundColor: colors.white[500],
      borderRadius: "50%",
      width: "var(--intro-cards-move-button-size)",
      height: "var(--intro-cards-move-button-size)",
      position: "absolute",
      top: "50%",
      transform: "translateY(-50%)"
    },
    prevButton: {
      left: "calc(-".concat(spaces.lg, " - var(--intro-cards-move-button-size))")
    },
    nextButton: {
      right: "calc(-".concat(spaces.lg, " - var(--intro-cards-move-button-size))")
    },
    frame: {
      overflow: "hidden"
    },
    boxContainer: {
      display: "flex"
    },
    box: {
      boxSizing: "border-box",
      width: "100%",
      flexShrink: "0",
      display: "flex",
      justifyContent: "center",
      alignItems: "center"
    },
    image: {
      marginBottom: spaces.md
    }
  };
});
export default styles;