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

var styles = function styles(_ref) {
  var _ref$cleverUI = _ref.cleverUI,
      colors = _ref$cleverUI.colors,
      typography = _ref$cleverUI.typography,
      spaces = _ref$cleverUI.spaces,
      borderRadius = _ref$cleverUI.borderRadius,
      transitions = _ref$cleverUI.transitions;
  return {
    label: function label(_ref2) {
      var color = _ref2.color;
      return {
        isolation: "isolate",
        boxSizing: "border-box",
        padding: 0,
        margin: 0,
        width: "100%",
        position: "relative",
        display: "grid",
        gridTemplateColumns: "auto auto",
        borderRadius: borderRadius.full,
        backgroundColor: colors.neutral[200],
        cursor: "pointer",
        fontFamily: typography.font1,
        fontSize: "16px",
        fontWeight: 700,
        color: colors[color][500],
        "& *": {
          boxSizing: "border-box",
          borderRadius: borderRadius.full
        }
      };
    },
    input: {
      appearance: "none",
      "&:focus-visible + label": {
        outline: "2px solid black"
      }
    },
    option: {
      // position: "absolute",
      // width: "50%",
      height: "100%",
      padding: "".concat(spaces.sm, " ").concat(spaces.md),
      textAlign: "center",
      boxSizing: "border-box",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      userSelect: "none",
      top: 0,
      "&[data-side='left']": {
        left: 0
      },
      "&[data-side='right']": {
        right: 0
      }
    },
    selectedOption: function selectedOption(_ref3) {
      var color = _ref3.color;
      return {
        position: "absolute",
        padding: "".concat(spaces.sm, " ").concat(spaces.md),
        width: "50%",
        height: "100%",
        color: colors[color][50],
        backgroundColor: colors[color][500],
        zIndex: 1,
        transition: "transform ".concat(transitions.duration["short"], " cubic-bezier(.01, .81, .44, 1)"),
        display: "grid",
        placeItems: "center",
        userSelect: "none"
      };
    },
    checked: {
      transform: "translateX(100%)"
    }
  };
};

export default makeStyles(styles);