import {StyleSheet} from 'react-native';
import {COLORS} from '@shared/colors';
import {SPACING} from '@shared/theme';

export const TAB_BAR_ITEM_SIZE = 36;

export const BADGE_SIZE = 22;

export const styles = StyleSheet.create({
  pillContainer: {
    backgroundColor: COLORS.DISALBED_LIGHT,
    borderColor: COLORS.DISALBED_LIGHT,
    borderRadius: TAB_BAR_ITEM_SIZE / 2,
    borderWidth: 2,
    height: TAB_BAR_ITEM_SIZE,
    justifyContent: 'center',
    marginRight: 10,
    paddingHorizontal: SPACING.x2,
  },
  activePillContainer: {
    backgroundColor: COLORS.PRIMARY_LIGHT,
    borderColor: COLORS.PRIMARY,
  },
  tabContainer: {
    alignItems: 'center',
    borderBottomColor: COLORS.DISALBED_LIGHT,
    borderBottomWidth: 1,
    flex: 1,
    flexDirection: 'row',
    height: '100%',
    justifyContent: 'center',
  },
  pillBadge: {
    height: BADGE_SIZE,
    position: 'absolute',
    right: -(BADGE_SIZE / 2),
    top: -(BADGE_SIZE / 2),
  },
  tabBadge: {
    height: BADGE_SIZE,
    marginLeft: SPACING.x1,
  },
  label: {color: COLORS.GRAY_THIRTY_THREE},
});
