import {StyleSheet, Dimensions, Platform} from 'react-native';
import {RFValue} from 'react-native-responsive-fontsize';
import {Colors, FONTS} from 'global-styles';
const {width} = Dimensions.get('window');

export default StyleSheet.create({
  modal: {
    margin: 0,
  },
  modalContainer: {
    flex: 1,
    margin: 0,
    justifyContent: 'flex-end',
  },
  modalContent: {
    height: width / 1.4,
    backgroundColor: Colors.WHITE,
    paddingVertical: width * 0.04,
    paddingHorizontal: width * 0.05,
    borderTopLeftRadius: width * 0.05,
    borderTopRightRadius: width * 0.05,
  },
  modalButtonClose: {
    backgroundColor: Colors.WHITE,
    width: width * 0.09,
    height: width * 0.09,
    borderRadius: width,
    marginBottom: width * 0.03,
    alignSelf: 'flex-end',
    marginRight: width * 0.03,
    alignItems: 'center',
    justifyContent: 'center',
  },
  modalButtonCloseIcon: {
    fontSize: RFValue(20),
    color: Colors.TEXT,
  },
  modalTitle: {
    fontFamily: FONTS.poppins[600],
    fontSize: RFValue(13),
    color: Colors.TEXT,
  },
  modalSection: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
  },
  inputStrip: {
    fontSize: RFValue(20),
    color: Colors.TEXT,
    marginHorizontal: width * 0.02,
  },
  inputSection: {
    width: Platform.OS === 'ios' ? undefined : width * 0.23,
    // borderWidth: 1,
    // borderColor: Colors.LINE_STROKE,
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    width: '100%',
    flex: 1,
    fontSize: RFValue(30),
    fontFamily: FONTS.poppins[600],
    color: Colors.TEXT,
  },
  modalButton: {
    backgroundColor: Colors.PRIMARY,
    height: width * 0.11,
    borderRadius: width * 0.015,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: width * 0.05,
  },
  modalButtonTitle: {
    fontFamily: FONTS.poppins[500],
    color: Colors.WHITE,
    fontSize: RFValue(12),
    marginTop: width * 0.005,
  },
});
