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

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