/* eslint-disable max-len */
import makeStyles from "../styles/makeStyles";

var styles = function styles(_ref) {
  var _ref$cleverUI = _ref.cleverUI,
      spaces = _ref$cleverUI.spaces,
      colors = _ref$cleverUI.colors,
      transitions = _ref$cleverUI.transitions;
  return {
    root: {
      boxSizing: "border-box",
      width: "100%",
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      appearance: "none",
      minHeight: "48px",
      borderWidth: 2,
      boxShadow: "none",
      backgroundColor: "white",
      borderRadius: 8,
      border: "2px solid ".concat(colors.neutral[300]),
      color: colors.neutral[700],
      transitionProperty: "border-color",
      transitionDuration: transitions.duration["short"],
      "&:active": {
        borderColor: colors.primary[500],
        color: colors.neutral[700]
      },
      "&:hover": {
        borderColor: colors.neutral[400],
        backgroundColor: "white",
        color: colors.neutral[700]
      },
      "&:focus": {
        borderColor: colors.neutral[300],
        backgroundColor: "white",
        color: colors.neutral[700]
      },
      "&:focus:hover": {
        borderColor: colors.neutral[700]
      }
    },
    button: {
      "-webkit-appearance": "none",
      paddingLeft: spaces.md,
      minHeight: "48px",
      border: "none",
      backgroundColor: "transparent"
    },
    select: {
      width: "100%"
    },
    inputOpen: {
      borderColor: colors.primary[500],
      "& path": {
        transitionProperty: "fill",
        transitionDuration: transitions.duration["short"],
        fill: colors.neutral[500]
      },
      "&:hover": {
        borderColor: colors.primary[700]
      }
    },
    checkbox: {
      appearance: "none",
      backgroundColor: "transparent",
      margin: 0,
      font: "inherit",
      color: "currentColor",
      width: "24px",
      height: "24px",
      border: "1.5px solid ".concat(colors.neutral[300]),
      borderRadius: "4px",
      transform: "translateY(-0.075em)",
      transition: "border-color ".concat(transitions.duration.quick),
      display: "grid",
      placeContent: "center",
      "&:hover": {
        borderColor: colors.neutral[400]
      },
      "&:disabled": {
        borderColor: colors.neutral[300]
      },
      "&::before": {
        content: "''",
        width: "24px",
        height: "24px",
        transform: " scale(0)",
        transition: "120ms transform ease-in-out",
        boxShadow: "inset 1em 1em var(--form-control-color)",
        transformOrigin: "bottom left",
        clipPath: "path('M10.8333 14.9448L7.25063 11.5918C6.75641 11.1293 5.96967 11.1998 5.56568 11.743C5.23821 12.1832 5.27285 12.7947 5.64794 13.1952L10 17.8414C10.4066 18.4067 11.2502 18.3997 11.6474 17.8278L19.1859 6.97224C19.6739 6.26963 19.6661 5.33582 19.1667 4.64138C18.6536 4.28803 17.9508 4.42067 17.6018 4.93674L10.8333 14.9448Z')",
        backgroundColor: colors.primary[500]
      },
      "&:checked::before": {
        transform: "scale(1)"
      }
    },
    popoverContent: {
      paddingTop: 8,
      zIndex: "1400 !important" // El !important es necesario debido a que la librería no permite esto: https://github.com/nextui-org/nextui/issues/667

    },
    clearIndicator: {
      "-webkit-appearance": "none",
      display: "flex",
      border: "none",
      padding: 0,
      backgroundColor: "transparent",
      "& svg": {
        "& path": {
          fill: colors.neutral[400]
        }
      },
      "& svg:hover": {
        "& path": {
          fill: colors.neutral[500]
        }
      }
    },
    chevronDown: {
      transitionProperty: "fill",
      transitionDuration: transitions.duration["short"],
      "& path": {
        fill: colors.neutral[500]
      },
      ":hover": {
        "& path": {
          fill: colors.blue[500]
        }
      }
    },
    chevronUp: {
      transitionProperty: "fill",
      transitionDuration: transitions.duration["short"],
      "& path": {
        fill: colors.blue[500]
      },
      "&:hover path": {
        fill: colors.blue[700]
      }
    }
  };
};

export default makeStyles(styles);