import {StyleSheet} from 'react-native';
import {COLORS} from '@shared/colors';
import {commonStyles} from '@shared/styles';

const INPUT_SPACING = {
  height: 48,
  padding: 8,
  containerMargin: 12,
  fontSize: 14,
};

export const styles = StyleSheet.create({
  container: {
    marginBottom: INPUT_SPACING.containerMargin,
  },
  label: {
    marginBottom: 8,
  },
  content: {
    alignItems: 'center',
    borderBottomWidth: 1,
    flexDirection: 'row',
    gap: 8,
    maxHeight: INPUT_SPACING.height * 2,
    minHeight: INPUT_SPACING.height,
  },
  textInput: {
    color: COLORS.BLACK,
    flex: 1,
    lineHeight: undefined,
    textAlignVertical: 'center',
    ...commonStyles.mainFontFamily,
  },
  passwordToggleIcon: {
    position: 'absolute',
    right: 4,
    top: 8,
    zIndex: 2,
  },
  error: {
    color: COLORS.ERROR,
    marginTop: 4,
    textAlign: 'left',
  },
  hint: {
    marginTop: 4,
  },
});
