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

export const styles = {
  list: {
    display: 'flex',
    flexDirection: 'column',
    gap: 0.5,
    // Values are hidden until the legend content is hovered (or keyboard-
    // focused). On hover-incapable (touch) devices they're always visible —
    // tap-:hover is unreliable on non-interactive elements.
    '&:hover .PsLegend-value, &:focus-within .PsLegend-value': {
      opacity: 1,
    },
    '@media (hover: none)': {
      '& .PsLegend-value': { opacity: 1 },
    },
  },
  item: {
    display: 'flex',
    alignItems: 'center',
    gap: 1,
  },
  // Fixed-width gutter so labels stay column-aligned regardless of swatch
  // shape or per-item size; the swatch is centered within it.
  gutter: {
    flexShrink: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  label: {
    flex: 1,
    minWidth: 0,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  },
  value: {
    flexShrink: 0,
    opacity: 0,
    transition: 'opacity 120ms',
  },
  // ─── Horizontal orientation modifiers (spread over the vertical base) ───
  // Items flow left-to-right and wrap; each is a compact swatch+label pair.
  listHorizontal: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    columnGap: 2,
    rowGap: 0.5,
  },
  // No fixed gutter — the swatch sits at its natural size next to the label.
  itemHorizontal: {
    gap: 0.5,
  },
  // Each chip sizes to its content (no flex-grow / ellipsis).
  labelHorizontal: {
    flex: '0 0 auto',
    overflow: 'visible',
    textOverflow: 'clip',
  },
} satisfies Record<string, SxProps<Theme>>