import _defineProperty from "@babel/runtime/helpers/defineProperty";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

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,
      formControls = _ref$cleverUI.formControls,
      borderRadius = _ref$cleverUI.borderRadius,
      transitions = _ref$cleverUI.transitions;
  return {
    "@global": {
      ":root": {
        "--cle-textfield-border-size": "2px"
      }
    },
    root: {
      position: "relative",
      "&:focus-within": {
        color: colors.primary[500]
      },
      "&:hover:focus-within": {
        color: colors.primary[500]
      }
    },
    input: _objectSpread(_objectSpread({
      "-webkit-tap-highlight-color": "transparent",
      font: "inherit",
      letterSpacing: "inherit",
      appearance: "none",
      display: "block",
      minWidth: 0,
      width: "100%",
      outline: 0,
      borderWidth: "var(--cle-textfield-border-size)",
      borderStyle: "solid",
      backgroundColor: colors.white[500],
      boxSizing: "border-box",
      borderColor: colors.neutral[300],
      color: colors.neutral[700],
      paddingInlineStart: spaces.md,
      paddingInlineEnd: spaces.md,
      paddingTop: spaces.sm,
      paddingBottom: spaces.sm,
      fontWeight: 600,
      borderRadius: borderRadius.normal,
      transitionProperty: "border-color",
      transitionDuration: transitions.duration["short"]
    }, typography.variants.inputText), {}, {
      "&:hover": {
        borderColor: colors.neutral[400]
      },
      "&:focus": {
        borderColor: colors.primary[500]
      },
      "&:hover:focus": {
        borderColor: colors.primary[700]
      },
      "textarea&": {
        minHeight: 80,
        resize: "vertical"
      },
      "&:not(textarea)": {
        height: formControls.heights.normal
      },
      "&[multiple]": {
        height: 96
      },
      "&::placeholder": {
        color: colors.neutral[400]
      },
      "&[disabled]": {
        color: colors.neutral[300],
        borderColor: colors.neutral[300]
      }
    }),
    error: {
      color: colors.danger[500],
      "& input, & input:focus": {
        borderColor: colors.danger[500]
      },
      "& input:hover, & input:focus:hover": {
        borderColor: colors.danger[700]
      },
      "&:focus-within, &:hover:focus-within": {
        color: colors.danger[500]
      }
    },
    success: {
      color: colors.success[500],
      "& input, & input:focus": {
        borderColor: colors.success[500]
      },
      "& input:hover, & input:focus:hover": {
        borderColor: colors.success[700]
      },
      "&:focus-within, &:hover:focus-within": {
        color: colors.success[500]
      }
    },
    warning: {
      color: colors.warning[500],
      "& input, & input:focus": {
        borderColor: colors.warning[500]
      },
      "& input:hover, & input:focus:hover": {
        borderColor: colors.warning[700]
      },
      "&:focus-within, &:hover:focus-within": {
        color: colors.warning[500]
      }
    },
    startAdornmentSpace: {
      paddingInlineStart: "calc(var(--cle-input-adornment-size) + var(--cle-input-adornment-space) * 2)"
    },
    endAdornmentSpace: {
      paddingInlineEnd: "calc(var(--cle-input-adornment-size) + var(--cle-input-adornment-space) * 2)"
    },
    helperText: _objectSpread({
      paddingTop: spaces.sm,
      textAlign: "right",
      color: colors.neutral[700]
    }, typography.variants.small),
    label: _objectSpread({
      display: "block",
      marginBottom: spaces.xs,
      color: colors.neutral[700]
    }, typography.variants.small)
  };
};

export default makeStyles(styles);