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

export const styles: Record<string, SxProps<Theme>> = {
  root: {
    display: 'flex',
    flexDirection: 'column',
    gap: (theme: Theme) => theme.spacing(2),
  },
  rangeItem: {
    display: 'flex',
    flexDirection: 'column',
    gap: (theme: Theme) => theme.spacing(1.5),
  },
  sliderContainer: {
    display: 'flex',
    flexDirection: 'column',
    gap: (theme: Theme) => theme.spacing(1),
    px: (theme: Theme) => theme.spacing(1),
  },
  inputsRow: {
    display: 'flex',
    gap: (theme: Theme) => theme.spacing(2),
    alignItems: 'center',
  },
  input: {
    flex: 1,
    '& .MuiInputBase-input': {
      textAlign: 'center',
    },
  },
  slider: {
    width: '100%',
    '&.Mui-disabled': {
      color: (theme: Theme) => theme.palette.text.disabled,
    },
  },
} satisfies Record<string, SxProps<Theme>>