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

export const styles = StyleSheet.create({
  btnOption: {
    paddingHorizontal: 16,
    paddingVertical: 9,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16
  },
  btnOptionText: { fontSize: 16, fontWeight: '600', color: Colors.DARK_BLUE },
  wrapper: {
    backgroundColor: Colors.WHITE,
    padding: 16,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    height: '86%'
  },
  modal: {
    justifyContent: 'flex-end',
    margin: 0
  },
  megaSelector: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 6,
    backgroundColor: Colors.DARK_LIGHT,
    justifyContent: 'space-between',
    marginBottom: 8
  },
  megaButtonText: {
    color: Colors.DARK_BLUE,
    fontWeight: 'bold',
    fontSize: 13
  },
  progressHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8
  },
  visitedCountriesCount: {
    color: Colors.DARK_BLUE,
    fontWeight: '600',
    fontSize: 12
  },
  slowScoreSection: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: 8
  },
  infoBtn: { paddingVertical: 8, paddingLeft: 16 }
});