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

var styles = function styles(_ref) {
  var _ref$cleverUI = _ref.cleverUI,
      colors = _ref$cleverUI.colors,
      spaces = _ref$cleverUI.spaces,
      transitions = _ref$cleverUI.transitions;
  return {
    "@global": {
      ":root": {
        "--cle-radio-size": "20px"
      }
    },
    label: {
      display: "inline-flex",
      alignItems: "center",
      gap: spaces.sm,
      "&:hover $input:not(:disabled):not(:focus-visible)": {
        borderColor: colors.neutral[400]
      }
    },
    input: {
      appearance: "none",
      border: "1.5px solid ".concat(colors.neutral[300]),
      width: "var(--cle-radio-size)",
      height: "var(--cle-radio-size)",
      display: "block",
      borderRadius: "50%",
      position: "relative",
      transition: "border-color ".concat(transitions.duration.quick),
      "&:not(:disabled)": {
        cursor: "pointer"
      },
      // increase interactivity area
      "&::before": {
        content: "\"\"",
        display: "block",
        position: "absolute",
        left: -6,
        right: -6,
        bottom: -6,
        top: -6,
        borderRadius: "inherit"
      },
      "&::after": {
        content: "\"\"",
        display: "block",
        position: "absolute",
        top: "50%",
        left: "50%",
        width: "calc(100% - 7px)",
        height: "calc(100% - 7px)",
        transform: "translate(-50%, -50%) scale(0)",
        opacity: 0,
        backgroundColor: colors.primary[500],
        borderRadius: "inherit",
        transition: "transform 0.25s, opacity 0.1s"
      },
      "&:checked::after": {
        opacity: 1,
        transform: "translate(-50%, -50%) scale(1)"
      },
      "&:focus": {
        outline: "none"
      },
      "&:focus-visible": {
        borderColor: colors.primary[500]
      },
      "&:disabled": {
        backgroundColor: colors.neutral[200]
      }
    }
  };
};

export default makeStyles(styles);