import { stepClasses } from '@mui/material/Step';
import { stepperClassnames } from '../../Stepper/constants';
export const MuiStep = {
    styleOverrides: {
        horizontal({ theme }) {
            return {
                '&:first-of-type': {
                    paddingLeft: 0,
                },
                '&:last-of-type': {
                    paddingRight: 0,
                },
                padding: theme.microSpacing(0, 5),
            };
        },
        root({ theme }) {
            return {
                minHeight: '28px',
                display: 'grid',
                [`&:has(.${stepperClassnames.stepButton}:focus-visible)`]: {
                    position: 'relative',
                    '&::before': {
                        content: '""',
                        borderRadius: theme.shape.medium,
                        position: 'absolute',
                        top: '0',
                        left: '5px',
                        right: '5px',
                        bottom: '0',
                        outline: `2px solid ${theme.palette.components.focused}`,
                        pointerEvents: 'none',
                    },
                },
                [`&.${stepClasses.horizontal}:first-of-type:has(.${stepperClassnames.stepButton}:focus-visible)`]: {
                    '&::before': {
                        left: '-5px',
                    },
                },
                [`&.${stepClasses.horizontal}:last-of-type:has(.${stepperClassnames.stepButton}:focus-visible)`]: {
                    '&::before': {
                        right: '-5px',
                    },
                },
                [`&.${stepClasses.vertical}:has(.${stepperClassnames.stepButton}:focus-visible)`]: {
                    '&::before': {
                        left: '-5px',
                        right: '-5px',
                    },
                },
            };
        },
    },
};
