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

export const styles = StyleSheet.create({
  tabBar: {
    backgroundColor: 'transparent',
    elevation: 0,
    shadowOpacity: 0,
    marginTop: 0,
    height: 42
  },
  tabLabel: {
    color: 'grey',
    fontSize: getFontSize(14),
    fontWeight: '700',
    padding: 8,
    width: Dimensions.get('window').width / 3,
    textAlign: 'center'
  },
  tabStyle: {
    padding: 0,
    marginHorizontal: 2
  },
  img: {
    width: 28,
    height: 28,
    borderRadius: 14,
    borderWidth: 1,
    borderColor: Colors.FILL_LIGHT
  },
  flagSmall: {
    width: 16,
    height: 16,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: Colors.FILL_LIGHT
  },
  title: {
    color: Colors.DARK_BLUE,
    fontFamily: 'montserrat-700',
    fontSize: 14
  },
  subTitle: {
    color: Colors.DARK_BLUE,
    fontWeight: '600',
    fontSize: 11
  },
  textContainer: { gap: 2, justifyContent: 'center', flex: 1 },
  container: { flexDirection: 'row', gap: 8, alignItems: 'center' },
  modal: {
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    backgroundColor: Colors.WHITE
  },
  modalContainer: {
    backgroundColor: Colors.WHITE,
    borderRadius: 15,
    gap: 12,
    paddingVertical: 16,
    height: '80%'
  }
});
