import { type SxProps, type Theme } from '@mui/material'

const ellipsed = {
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
}

export const styles = {
  label: {
    '& .MuiListItemText-primary': {
      ...ellipsed,
    },
  },
  value: {
    '& .MuiListItemText-primary': {
      ...ellipsed,
      textAlign: 'right',
    },
  },
  clickable: {
    cursor: 'pointer',
    '&:hover': {
      backgroundColor: ({ palette }) => palette.action.hover,
    },
  },
  showDivider: {
    borderBottom: ({ palette }) => `1px solid ${palette.divider}`,
  },
  selected: {
    backgroundColor: ({ palette }) => palette.action.selected,
  },
  disabled: {
    opacity: 0.5,
    pointerEvents: 'none',
  },
} satisfies Record<string, SxProps<Theme>>