import {StyleSheet} from 'react-native';
import {BORDER_RADIUS, SPACING} from '@shared/theme';

import {TABS_HEADER_HEIGHT, TAB_HEIGHT} from '../../../../constants';

export const styles = StyleSheet.create({
  container: {
    height: TABS_HEADER_HEIGHT,
    marginHorizontal: SPACING.x2,
    marginVertical: SPACING.x1,
  },
  content: {gap: SPACING['x0.5']},
  lineIndicator: {
    bottom: 0,
    height: 2,
    overflow: 'hidden',
    position: 'absolute',
    width: 1,
    zIndex: -1,
  },
  maskedContainer: {flex: 1},
  maskGradient: {flex: 1},
  divider: {borderBottomWidth: 1},
  selectedTabIndicator: {
    borderRadius: BORDER_RADIUS.m,
    bottom: 6,
    height: TAB_HEIGHT,
    overflow: 'hidden',
    position: 'absolute',
    width: 1,
    zIndex: -1,
  },
});
