import { StyleSheet } from 'react-native';
import { Colors } from '../../../../theme';
import { getFontSize } from '../../../../utils';

export const styles = StyleSheet.create({
  modalContent: {
    backgroundColor: 'white',
    borderRadius: 15,
    paddingHorizontal: 16,
    gap: 12,
    paddingVertical: 12,
    height: '90%'
  },
  megaregion: {
    marginBottom: 16
  },
  megaregionTitle: {
    fontWeight: '700',
    fontSize: 13,
    color: Colors.DARK_BLUE,
    flex: 7
  },
  regionRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
    justifyContent: 'space-between',
    gap: 6
  },
  flags: {
    flexDirection: 'row',
    gap: 8,
    alignItems: 'center',
    flex: 7
  },
  regionInfo: {
    flexShrink: 1
  },
  regionName: {
    fontSize: 12,
    fontWeight: '600',
    color: Colors.DARK_BLUE
  },
  regionDates: {
    fontSize: 14,
    color: 'gray'
  },
  regionsFlag: {
    width: 32,
    height: 32,
    borderRadius: 32 / 2,
    borderWidth: 1,
    borderColor: Colors.FILL_LIGHT
  },
  header: {
    width: '100%',
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center'
  },
  headerText: {
    fontFamily: 'redhat-600',
    fontSize: getFontSize(14),
    color: Colors.DARK_BLUE
  },
  alignCenter: {
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center'
  },
  blockTitle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 12
  },
  slow: { width: '33%', alignItems: 'center', justifyContent: 'center' },
  megaSubList: { flex: 1, minHeight: 20, width: '100%' }
});