import { StyleSheet } from 'react-native';
import { Colors } from '../../theme';
import { getFontSize } from '../../utils';

export const styling = (focused: boolean) =>
  StyleSheet.create({
    inputError: {
      borderStyle: 'solid',
      borderColor: Colors.RED
    },
    wrapper: {
      width: '100%',
      color: Colors.DARK_BLUE,
      height: 44,
      borderStyle: 'solid',
      borderWidth: 1,
      borderColor: focused ? Colors.DARK_BLUE : 'rgba(250, 250, 250, 1)',
      borderRadius: 6,
      backgroundColor: Colors.FILL_LIGHT,
      fontSize: 15
    },
    text: {
      color: Colors.DARK_BLUE,
      fontSize: getFontSize(14),
      fontFamily: 'redhat-700',
      marginBottom: 5
    },
    errorText: {
      color: Colors.RED,
      fontSize: getFontSize(12),
      fontFamily: 'redhat-600',
      marginTop: 5
    },
    clearIcon: {
      height: 44,
      width: 44,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }
  });
