export const MuiOutlinedInput = {
    defaultProps: {
        notched: false,
    },
    styleOverrides: {
        root({ theme }) {
            return {
                fontSize: theme.typography.pxToRem(14),
                borderRadius: theme.shape.medium,
                color: theme.palette.grey[900],
                background: theme.palette.background.element,
                padding: theme.microSpacing(1, 0),
                '&:hover': {
                    background: theme.palette.background.elementHover,
                },
                '&.Mui-disabled': {
                    backgroundColor: theme.palette.components.disabled,
                },
                '&:hover .MuiOutlinedInput-notchedOutline': {
                    borderColor: theme.palette.grey[800],
                    transition: theme.transitions.create(['border-color'], {
                        easing: theme.transitions.easing.easeIn,
                        duration: theme.transitions.duration.shortest,
                    }),
                },
                '&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
                    border: 'none',
                },
                '&.Mui-error .MuiOutlinedInput-notchedOutline': {
                    borderColor: theme.palette.error.dark,
                },
                '&.Mui-error:hover:not(.Mui-focused) .MuiOutlinedInput-notchedOutline': {
                    borderColor: theme.palette.error[900],
                },
                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                    borderColor: theme.palette.primary[700],
                    transition: 'none',
                },
            };
        },
        input({ theme, ownerState }) {
            const isStartAdornmentString = typeof ownerState.startAdornment === 'string';
            return {
                height: 20,
                padding: theme.spacing(2, 3),
                paddingLeft: isStartAdornmentString
                    ? theme.spacing(1)
                    : theme.spacing(3),
                '&:autofill': {
                    boxShadow: '0 0 0 1000px white inset',
                },
                '&::placeholder': {
                    opacity: 1,
                    color: theme.palette.grey[500],
                },
            };
        },
        inputSizeSmall({ theme }) {
            return {
                paddingBlock: theme.spacing(1),
                paddingInline: theme.spacing(3),
            };
        },
        notchedOutline({ theme }) {
            return {
                borderWidth: 1,
                borderColor: theme.palette.components.border.default,
                top: 0,
                transition: theme.transitions.create(['border-color'], {
                    easing: theme.transitions.easing.easeInOut,
                    duration: theme.transitions.duration.shortest,
                }),
                '& > legend': {
                    display: 'none',
                },
            };
        },
        multiline() {
            return {
                padding: 0,
            };
        },
        inputMultiline({ theme }) {
            return {
                padding: theme.spacing(2, 3),
            };
        },
    },
};
export default MuiOutlinedInput;
