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

export const styles = {
  root: {
    color: 'text.primary',
    '& a': { color: 'primary.main' },
    '& code': {
      bgcolor: 'action.hover',
      px: 0.5,
      borderRadius: 0.5,
      fontFamily: 'monospace',
      fontSize: '0.875em',
    },
    '& pre': {
      bgcolor: 'action.hover',
      p: 1.5,
      borderRadius: 1,
      overflowX: 'auto',
    },
    '& blockquote': {
      borderLeft: '3px solid',
      borderColor: 'divider',
      pl: 1.5,
      ml: 0,
      color: 'text.secondary',
      fontStyle: 'italic',
    },
    '& ul, & ol': { pl: 3, my: 1 },
    '& li': { my: 0.25 },
    '& hr': {
      border: 'none',
      borderTop: '1px solid',
      borderColor: 'divider',
      my: 1.5,
    },
    '& table': { borderCollapse: 'collapse', width: '100%' },
    '& th, & td': {
      border: '1px solid',
      borderColor: 'divider',
      px: 1,
      py: 0.5,
      textAlign: 'left',
    },
  },
  paragraph: {
    my: 1,
  },
  heading: {
    mt: 2,
    mb: 1,
    fontWeight: 600,
  },
} satisfies Record<string, SxProps<Theme>>