import {css} from '@mui/material/styles';
import type {Theme} from '@mui/material';

const TimelineStepSeparator = (theme: Theme) => {
    return css`
        &:not(:first-of-type) {
            padding-left: 1.5rem;
        }

        &:not(:last-of-type) {
            &:after,
            &:before {
                content: '';
                position: absolute;
                z-index: 1;
                width: 1em;
                bottom: -0.5rem;
                top: -0.5rem;
                left: 100%;
                background: ${theme.palette.white};
                clip-path: polygon(50% 50%, -50% -50%, 0 100%);
            }

            &:before {
                background: ${theme.palette.gray[300]};
                margin-inline-start: 1px;
            }
        }
    `;
};

export {TimelineStepSeparator};