import { pxToRem } from '../typography';

export default function LoadingButton(theme) {
  return {
    MuiLoadingButton: {
      styleOverrides: {
        root: {
          justifyContent: 'space-between',
          borderRadius: 8,
          width: '100%',
          height: '25px',
          fontSize: pxToRem(8),
          fontFamily: theme.fontFamily.semiBold,
          [theme.breakpoints.up('md')]: {
            fontSize: pxToRem(14),
            height: '40px',
          },
          [theme.breakpoints.up('lg')]: {
            fontSize: pxToRem(14),
            height: '40px',
          },
          [theme.breakpoints.up('xl')]: {
            fontSize: pxToRem(16),
            height: '50px',
          },
        },
      },
    },
  };
}
