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

export const styles = {
  // Outlined-input look-alike trigger (the design's select has no floating
  // label — just the value + chevron in a 32px bordered field).
  trigger: {
    width: '100%',
    minHeight: 32,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 1,
    padding: ({ spacing }) => spacing(0, 1.5),
    border: '1px solid',
    borderColor: 'divider',
    borderRadius: 1,
    backgroundColor: 'background.paper',
    color: 'text.primary',
    '&:hover': {
      borderColor: 'text.primary',
    },
  },
  value: {
    minWidth: 0,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  },
  chevron: {
    flexShrink: 0,
    color: 'action.active',
    transition: ({ transitions }: Theme) => transitions.create('transform'),
  },
  chevronOpen: {
    transform: 'rotate(180deg)',
  },
  sectionTitle: {
    padding: ({ spacing }) => spacing(1, 2, 0.5, 2),
    lineHeight: 1.5,
  },
  // Figma: the active option reads as primary-colored text, no background.
  option: {
    '&.Mui-selected, &.Mui-selected:hover': {
      backgroundColor: 'transparent',
      color: 'primary.main',
    },
  },
} satisfies Record<string, SxProps<Theme>>