import { StyleSheet } from 'react-native';
import { Colors } from 'src/theme';

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  wrapper: {
    marginLeft: '5%',
    marginRight: '5%',
    alignItems: 'center'
  },
  modalWrapper: {
    backgroundColor: Colors.WHITE,
    padding: 16,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    height: '86%'
  },
  map: {
    ...StyleSheet.absoluteFillObject
  },
  searchContainer: {
    gap: 16,
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8
  },
  closeBtn: { backgroundColor: Colors.WHITE, borderColor: '#B7C6CB' },
  modal: {
    justifyContent: 'flex-end',
    margin: 0
  },
  modalContent: {
    backgroundColor: 'white',
    borderRadius: 15,
    paddingHorizontal: 16,
    paddingVertical: 24
  },
  groupTitle: {
    fontSize: 15,
    fontFamily: 'montserrat-700',
    color: Colors.DARK_BLUE,
    marginTop: 16,
    marginBottom: 8
  },
  seriesItem: {
    padding: 8
  },
  seriesText: {
    fontSize: 14,
    color: Colors.DARK_BLUE,
    fontWeight: '500'
  },
  searchInput: {
    backgroundColor: Colors.FILL_LIGHT,
    borderRadius: 0,
    borderTopRightRadius: 4,
    borderBottomRightRadius: 4,
    height: 36
  },
  searchIcon: {
    height: 36,
    backgroundColor: Colors.FILL_LIGHT,
    paddingLeft: 16,
    alignItems: 'center',
    justifyContent: 'center',
    borderTopLeftRadius: 4,
    borderBottomLeftRadius: 4
  }
});
