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

var styles = function styles(_ref) {
  var _ref$cleverUI = _ref.cleverUI,
      colors = _ref$cleverUI.colors,
      spaces = _ref$cleverUI.spaces,
      borderRadius = _ref$cleverUI.borderRadius,
      transitions = _ref$cleverUI.transitions;
  return {
    "@global": {
      ":root": {
        "--cle-checkbox-size": "24px"
      }
    },
    root: {
      position: "relative",
      display: "inline-flex",
      alignItems: "center",
      gap: spaces.sm,
      "&:hover $input:not(:disabled):not(:focus-visible)": {
        borderColor: colors.neutral[400]
      }
    },
    boxIcon: {
      boxSizing: "border-box",
      width: "var(--cle-checkbox-size)",
      height: "var(--cle-checkbox-size)",
      display: "flex",
      color: colors.primary[500],
      alignItems: "center",
      justifyContent: "center",
      padding: spaces.xs,
      position: "absolute",
      "& svg": {
        width: "100%",
        height: "100%",
        display: "block"
      }
    },
    checkSvg: {
      strokeDasharray: 6,
      opacity: 0,
      transitionTimingFunction: transitions.easings.ease_in_out,
      transitionDuration: transitions.duration["short"],
      transitionProperty: "stroke-dasharray, opacity"
    },
    input: {
      width: "var(--cle-checkbox-size)",
      height: "var(--cle-checkbox-size)",
      display: "flex",
      color: colors.primary[500],
      border: "1.5px solid ".concat(colors.neutral[300]),
      alignItems: "center",
      justifyContent: "center",
      borderRadius: borderRadius.small,
      flexShrink: 0,
      appearance: "none",
      transition: "border-color ".concat(transitions.duration.quick),
      "&:focus": {
        outline: "none"
      },
      "&:focus-visible": {
        borderColor: colors.primary[500]
      },
      "&:disabled": {
        backgroundColor: colors.neutral[200]
      },
      "&:disabled + $boxIcon": {
        color: colors.neutral[400]
      },
      "&:not(:disabled) + $boxIcon": {
        cursor: "pointer"
      },
      "&:checked + $boxIcon $checkSvg": {
        opacity: 1,
        strokeDasharray: 16,
        transitionDuration: transitions.duration.quick
      }
    }
  };
};

export default makeStyles(styles);