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

var styles = function styles(_ref) {
  var colors = _ref.cleverUI.colors;
  return {
    "@global": {
      ":root": {
        "--cle-divider-size": "1px"
      }
    },
    reset: {
      border: 0,
      margin: 0
    },
    horizontal: {
      width: "100%",
      minWidth: "100px",
      height: "var(--cle-divider-size)",
      backgroundColor: colors.neutral[300]
    },
    vertical: {
      heigth: "100%",
      minHeight: "24px",
      width: "var(--cle-divider-size)",
      backgroundColor: colors.neutral[300],
      "--cle-divider-bg-deg": "180deg"
    },
    dashed: {
      backgroundColor: "transparent",
      backgroundSize: "12px 12px",
      backgroundImage: "linear-gradient(var(--cle-divider-bg-deg, 90deg),\n        rgba(255,255,255,0) 0%,\n        rgba(255,255,255,0) 64%,\n        ".concat(colors.neutral[300], " 64%,\n        ").concat(colors.neutral[300], " 100%)")
    }
  };
};

export default makeStyles(styles);