import { Platform, StyleSheet } from 'react-native';
import { Colors, Radius, Spacing } from '../Consts';

export default StyleSheet.create({
  screenBanner: {
    width: '100%',
  },
  boxGrid: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    borderColor: 'red',
    borderWidth: 1,
    zIndex: 99,
  },
  boxGridSection: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    borderColor: 'blue',
    borderWidth: 2,
    zIndex: 100,
  },
  boxGridCard: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    borderColor: 'green',
    borderWidth: 2,
    zIndex: 100,
  },
  card: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    borderRadius: Radius.M,
    padding: 12,
  },
  item: {
    margin: undefined,
    marginTop: undefined,
    marginBottom: undefined,
    marginLeft: undefined,
    marginRight: undefined,
    marginVertical: undefined,
    marginHorizontal: undefined,
  },
  imageBackground: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  },
  protectedStyle: {
    marginTop: undefined,
    marginBottom: undefined,
    marginLeft: undefined,
    marginRight: undefined,
    paddingTop: undefined,
    paddingBottom: undefined,
    paddingLeft: undefined,
    paddingRight: undefined,
    padding: undefined,
    margin: undefined,
    marginHorizontal: undefined,
    marginVertical: undefined,
    paddingHorizontal: undefined,
    paddingVertical: undefined,
  },
  shadow: {
    paddingTop: Spacing.S,
    ...Platform.select({
      ios: {
        shadowColor: Colors.black_17,
        shadowOffset: {
          width: 2,
          height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 10,
      },
      android: {
        shadowColor: Colors.black_20,
        elevation: 24,
      },
    }),
  },
  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
});