// template/src/modules/core/combined-auth/components/BottomTabs/styles.ts
import { StyleSheet } from 'react-native';

export const bottomTabsStyles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: '#000',
    borderTopWidth: 1,
    borderTopColor: '#333',
    paddingBottom: 5,
    paddingTop: 8,
  },
  
  tabItem: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 8,
    paddingHorizontal: 4,
  },
  
  tabIcon: {
    width: 24,
    height: 24,
    backgroundColor: '#666',
    borderRadius: 4,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 4,
  },
  
  tabIconActive: {
    backgroundColor: 'green',
  },
  
  tabIconText: {
    color: 'white',
    fontSize: 10,
    fontWeight: 'bold',
  },
  
  tabLabel: {
    fontSize: 10,
    color: '#666',
    textAlign: 'center',
  },
  
  tabLabelActive: {
    color: 'green',
    fontWeight: '600',
  },
});