import { StyleSheet } from 'react-native';
import { spacing } from '../../theme';

export const style = StyleSheet.create({
  backdrop: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0,0,0,.2)'
  },
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  scrollContainer: {
    alignSelf: 'flex-end',
    flex: 1
  },
  body: {
    alignSelf: 'center',
    backgroundColor: '#fff',
    width: '100%',
    maxWidth: 380,
    marginBottom: 30
  },
  content: {
    paddingHorizontal: spacing[4],
    paddingBottom: spacing[4]
  },
  loginActions: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  poweredBy: {
    padding: spacing[4],
    justifyContent: 'center',
    alignContent: 'center'
  },
  poweredByText: {
    textAlign: 'center',
    textTransform: 'uppercase',
    opacity: 0.4,
    fontWeight: 'bold'
  },
  loginButtons: {
    padding: 15
  },
  loginButton: {
    paddingVertical: 15,
    paddingHorizontal: 20,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
    flexDirection: 'row'
  },
  loginButtonText: {
    textTransform: 'uppercase',
    textAlign: 'center',
    flex: 1
  },
  loginButtonIconContainer: {
    marginLeft: 'auto',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  loginButtonIcon: {
    minWidth: 20,
    justifyContent: 'center',
    alignItems: 'center'
  },
  iconDivider: {
    height: 22,
    width: 1,
    backgroundColor: 'rgba(128, 128, 128, 0.5)',
    marginLeft: 15
  }
});