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

export const styles = {
  toggle: {
    p: 0.5,
    '& .MuiSvgIcon-root': { fontSize: 20 },
  },
  toggleActive: {
    background: (theme: Theme) => theme.palette.primary.relatedLight,
  },
  menuPaper: {
    overflow: 'hidden',
    minWidth: 220,
  },
  item: {
    cursor: 'grab',
    '&:focus-visible': {
      outline: '2px solid',
      outlineColor: 'primary.main',
      outlineOffset: -2,
    },
  },
  itemDragging: {
    opacity: 0.5,
    cursor: 'grabbing',
  },
  dragHandle: {
    color: 'text.secondary',
    mr: 1,
    fontSize: 18,
  },
} satisfies Record<string, SxProps<Theme>>