import { makeStyles } from '@cleartrip/ct-design-style-manager';

/**
 * Static styles shared by both web and native implementations. All
 * values are pure theme lookups and layout primitives that work
 * identically across platforms; dynamic width (based on the maximum
 * number of digits in the list length) is applied on top via
 * `useStyles` inside the component.
 */
const staticBulletedListStyles = makeStyles((theme) => ({
  itemWrapper: {
    flexDirection: 'row' as const,
    alignItems: 'flex-start' as const,
    columnGap: theme?.spacing[1],
  },
  placeHolder: {
    flexShrink: 0,
    color: theme?.color.text.primary,
    minWidth: 20,
    alignItems: 'center' as const,
    justifyContent: 'center' as const,
  },
  itemContent: {
    flex: 1,
  },
  marker: {
    flexDirection: 'row' as const,
    alignItems: 'center' as const,
    justifyContent: 'center' as const,
  },
}));

export default staticBulletedListStyles;