import {width} from 'cli-color';
import {StyleSheet} from 'react-native';
import {Dimensions} from 'react-native';

const windowWidth = Dimensions.get('window').width;

const windowHeight = Dimensions.get('window').height;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingLeft: 30,
    paddingRight: 30,
    justifyContent: 'center',
    position: 'relative',
    // alignItems: 'center',
  },
  imgContainer: {
    width: '100%',
    alignItems: 'center',
  },
  inputContainer: {
    height: 200,
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    height: 40,
    width: '100%',
    borderBottomWidth: 1,
    // textAlign: "left",
    marginTop: 30,
    fontSize: 18,
  },
  passwordInput: {
    // flexDirection: 'row-reverse',
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
  },
  buttonContainer: {
    width: 50,
    height: 50,
    backgroundColor: '#ec5c26',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 30,
    margin: 20,
    marginRight: 0,
    marginLeft: 0,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 11,
    },
    shadowOpacity: 0.57,
    shadowRadius: 15.19,
    elevation: 11,
  },
  buttonIcon: {
    fontSize: 26,
    color: 'white',
  },
  loadingContainer: {
    // flex: 1,
    // position: "absolute",
    // width: 200,
    // backgroundColor: rgba(255, 255, 255, 0.4),
  },
  loading: {
    position: 'absolute',
    width: 200,
    // flex: 1,
    // justifyContent: "center",
    // alignItems: "center"
  },
  loadingViewStyle: {
    width: windowWidth,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0, 0.3)',
    height: windowHeight,
    position: 'absolute',
  },
  lottieLoadingStyle: {
    width: '60%',
  },
});

export default styles;
