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

export const styles = StyleSheet.create({
  listContainer: {
    borderRadius: BORDER_RADIUS.l,
    borderWidth: 1,
    overflow: 'hidden',
  },
  listContent: {
    gap: SPACING['x1.5'],
    padding: SPACING.x2,
  },
  maskGradient: {flex: 1},
  itemContainer: {
    height: 66,
    justifyContent: 'center',
    width: 72,
  },
  internalItemContainer: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  internalItemTitle: {marginTop: SPACING['x0.5']},
  internalItemXContainer: {
    alignItems: 'center',
    borderRadius: BORDER_RADIUS.m,
    height: 20,
    justifyContent: 'center',
    padding: SPACING['x0.5'],
    position: 'absolute',
    right: -10,
    top: -4,
    width: 20,
  },
  firstItemContainer: {marginLeft: SPACING.x1},
  lastItemContainer: {marginRight: SPACING.x1},
});
