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

export const styles = {
  root: {
    display: 'flex',
    alignItems: 'center',
    gap: 0.5,
    minHeight: 24,
  },
  label: {
    color: 'text.secondary',
  },
  count: {
    display: 'inline-flex',
    alignItems: 'baseline',
    gap: 0.5,
  },
  selected: {
    color: 'text.primary',
    fontWeight: 600,
  },
  separator: {
    color: 'text.secondary',
  },
  total: {
    color: 'text.secondary',
  },
  clear: {
    color: 'primary.main',
    cursor: 'pointer',
    fontWeight: 500,
    '&:hover': { textDecoration: 'underline' },
  },
  icon: {
    fontSize: 16,
    color: 'text.secondary',
  },
} satisfies Record<string, SxProps<Theme>>