import { createStyles } from "../../node_modules/.pnpm/@mantine_emotion@7.15.2_@emotion_cache@11.14.0_@emotion_react@11.14.0_@types_react@18.3.18_re_vflj3eioazr6wkrxpatinf66nq/node_modules/@mantine/emotion/esm/create-styles.mjs";
const useStyles = createStyles((theme, params, utils) => {
  const { hasError } = params;
  const invalidColor = theme.variantColorResolver({
    variant: "filled",
    color: "red",
    theme
  }).background;
  const invalidStyles = {
    borderColor: theme.colors.red[4],
    color: invalidColor,
    "&:hover": {
      borderColor: theme.colors.red[4]
    },
    "&:focus": {
      borderColor: theme.colors.red[4]
    }
  };
  return {
    dropdownButton: {
      display: "none"
    },
    container: {
      // marginTop: 8,
      "&.react-tel-input": {
        ".form-control": {
          fontFamily: theme.fontFamily,
          // see more https://github.com/mantinedev/mantine/blob/v6/src/mantine-core/src/Input/Input.styles.ts#L30-L187
          [utils.dark]: {
            backgroundColor: theme.colors.carbon[0]
          },
          [utils.light]: {
            backgroundColor: theme.white
          },
          transition: "border-color 100ms ease",
          fontSize: 14,
          color: theme.colors.carbon[8],
          width: "100%",
          height: 40,
          minHeight: 40,
          lineHeight: "38px",
          borderRadius: theme.defaultRadius,
          padding: "0 12px",
          borderWidth: 1,
          borderStyle: "solid",
          borderColor: theme.colors.carbon[4],
          marginBottom: hasError ? 5 : void 0,
          outline: "none",
          "&:hover": {
            borderColor: theme.colors.carbon[5]
          },
          "&:focus, &:focus-within": {
            borderColor: theme.colors.carbon[9]
          },
          "&::placeholder": {
            userSelect: "none",
            color: theme.colors.carbon[6],
            opacity: 1
          },
          ...hasError ? invalidStyles : void 0
        }
      }
    }
  };
});
export {
  useStyles
};
