import heroVariables from '../global';

const TAB_PADDING = heroVariables.SMALL_SIZE;
const SELECTED_BORDER_COLOR = heroVariables.PRIMARY_COLOR;

const styles = {
  wrapper: {
    flex: 1,
  },
  navigator: {
    flexDirection: 'row',
    alignItems: 'stretch',
  },
  tab: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: TAB_PADDING,
    borderBottomWidth: 3,
    borderBottomColor: 'transparent',
  },
  content: {
    flex: 1,
  },
  selectedTab: {
    borderBottomColor: SELECTED_BORDER_COLOR,
  },
} as const;

export default styles;