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

export const styles = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    gap: 0.5,
  },
  attribute: {
    display: 'flex',
    flexDirection: 'column',
  },
  // Inline error shown when a discrete ramp's stop count is incoherent.
  error: {
    display: 'flex',
    alignItems: 'center',
    gap: 0.5,
    color: 'error.main',
  },
  // Positioning context for the avg marker; the inner bar keeps its rounded
  // clip while the line is free to overflow vertically.
  barWrap: {
    position: 'relative',
  },
  bar: {
    height: 8,
    borderRadius: '2px',
    overflow: 'hidden',
    display: 'flex',
  },
  avgLine: {
    position: 'absolute',
    top: -2,
    bottom: -2,
    width: 0,
    borderLeft: '1.5px dashed',
    borderColor: 'text.primary',
    transform: 'translateX(-50%)',
  },
  step: {
    flex: 1,
    height: '100%',
  },
  labels: {
    display: 'flex',
    justifyContent: 'space-between',
    gap: 1,
  },
  // Boundary mode: labels absolutely positioned so each centers on the line
  // between adjacent color steps. The outer two clamp inside the bar's width
  // (first left-aligned, last right-aligned) so nothing overflows the row.
  // `left`/`transform` are applied inline per label in the renderer.
  boundaryLabels: {
    position: 'relative',
    height: 16,
  },
  boundaryLabel: {
    position: 'absolute',
    top: 0,
    whiteSpace: 'nowrap',
  },
} satisfies Record<string, SxProps<Theme>>