import { formControlLabelClasses } from '@mui/material/FormControlLabel';
import { stackClasses } from '@mui/material/Stack';
import { FormControlLabel } from '../FormControlLabel';
import { FormHelperText } from '../FormHelperText';
import { styled } from '../styled';
import { checkboxFieldClassnames } from './constants';
export const StyledFormControlledLabel = styled(FormControlLabel) `
  align-items: flex-start;

  .${stackClasses.root} {
    display: flex;
    flex-direction: row;
  }

  .${formControlLabelClasses.asterisk} {
    align-self: flex-start;
  }

  .${checkboxFieldClassnames.label} {
    margin-left: 0;
    padding-top: calc(${({ theme }) => theme.spacing(1)} + 2px);

    ${({ theme }) => theme.breakpoints.down('sm')} {
      padding-top: calc(${({ theme }) => theme.spacing(2)} + 2px);
    }
  }
`;
export const StyledFormHelperText = styled(FormHelperText) `
  padding-left: ${({ theme }) => theme.spacing(7)};
  
  ${({ theme }) => theme.breakpoints.down('sm')} {
    padding-left: ${({ theme }) => theme.spacing(9)};
  }
`;
