// @flow
import { Platform, StyleSheet } from 'react-native';
import { border, colors, space } from '../Utils/Theme';

const styles = StyleSheet.create({
  field: {
    ...Platform.select({
      web: {
        boxSizing: 'border-box',
      },
    }),
    height: 44,
    marginTop: space.large,
    marginBottom: space.regular,
    display: 'flex',
  },
  input: {
    ...Platform.select({
      web: {
        boxSizing: 'border-box',
      },
    }),
    display: 'flex',
    height: 44,
    width: 200,
    paddingTop: space.large,
    paddingBottom: space.regular,
    borderBottomColor: border.color,
    borderStyle: border.style,
    borderBottomWidth: border.width,
  },
  hovered: {
    borderBottomColor: colors.black(),
  },
  focused: {
    ...Platform.select({
      web: {
        outline: 'none',
      },
    }),
    paddingBottom: 7,
    borderBottomColor: colors.primary,
    borderBottomWidth: border.width * 2,
  },
});

export default styles;
