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

export const styles = {
  root: {
    display: 'flex',
    flexDirection: 'column',
    gap: 1,
  },
  attribute: {
    display: 'flex',
    flexDirection: 'column',
  },
  body: {
    display: 'flex',
    alignItems: 'flex-end',
    gap: 2,
    paddingTop: 0.5,
  },
  circles: {
    position: 'relative',
    flexShrink: 0,
  },
  // All circles share the bottom and right edges (anchored bottom-right), so
  // they nest along the diagonal — largest fanning up-left, smallest in the
  // bottom-right. Every circle has the SAME opaque fill, so overlaps don't
  // compound (uniform colour) while the borders still read as nested rings.
  circle: {
    position: 'absolute',
    right: 0,
    bottom: 0,
    borderRadius: '50%',
    backgroundColor: 'grey.50',
    border: '1px solid',
    borderColor: 'grey.100',
    boxSizing: 'border-box',
  },
  labels: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
} satisfies Record<string, SxProps<Theme>>