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

export const styles = {
  // Figma "Legend Opacity": a soft rounded bar between the row header and the
  // body — caption label + ✕ on the first line, slider + % input below.
  inline: {
    display: 'flex',
    flexDirection: 'column',
    gap: 0.5,
    borderRadius: 1,
  },
  inlineHeader: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  inlineControls: {
    display: 'flex',
    alignItems: 'center',
    gap: 1.5,
  },
  slider: {
    flex: 1,
  },
  // Wide enough for "100 %" — the value must never ellipsize.
  input: {
    width: 72,
    flexShrink: 0,
    '& input': {
      textAlign: 'right',
    },
  },
} satisfies Record<string, SxProps<Theme>>