import { SCREEN_WIDTH, colors } from '../../styleVars';

const styles = {
  slideStyle: {
    width: SCREEN_WIDTH,
  },
  detailsSectionStyle: {
    backgroundColor: colors.white,
    borderBottomWidth: 1,
    borderColor: colors.middleGrey
  },
  dividerStyle: {
    backgroundColor: colors.middleGrey,
    marginTop: 10,
    marginBottom: 15
  },
  textBoxStyles: {
    flex: 1,
    width: '100%',
    color: colors.black
  },
  inputAndButtonRow: {
    flex: 2,
    marginTop: 15,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  halfInputStyle: {
    flex: 1
  },
  keywordInputTextStyle: {
    width: '100%',
  },
  halfButtonStyle: {
    backgroundColor: colors.buttonBlue,
    flex: 1,
    borderRadius: 5
  },
  centeredInputContainerStyle: {
    borderBottomWidth: 0,
    marginLeft: 15,
    marginRight: 0
  },
  centeredInputTextStyle: {
    textAlign: 'center',
    color: colors.black
  },
  centeredTextBoxStyles: {
    textAlign: 'center',
    flex: 1,
    width: '100%',
    color: colors.black
  },
  inputTextStyle: {
    width: '100%',
    color: colors.black
  },
  nameTextStyle: {
    fontSize: 22,
    fontWeight: 'bold'
  },
  keywordViewStyle: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  keywordStyle: {
    borderWidth: 1,
    borderColor: colors.middleGrey,
    borderRadius: 15,
  },
  checkboxRowStyle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start'
  },
  helpIconStyle: {
    paddingLeft: 15,
    marginRight: -10
  },
  educationNumberTextStyle: {
    color: colors.orange,
    fontSize: 15,
    fontWeight: 'bold',
    marginHorizontal: 10,
    alignSelf: 'center'
  },
  colors,
  SCREEN_WIDTH
};

export default styles;
