import {styled} from "@mui/material/styles";
import Switch from "@mui/material/Switch";

const AntSwitch = styled(Switch)(({ theme }) => ({
    width: 28,
    height: 16,
    padding: 0,
    display: 'flex',
    '&:active': {
        '& .MuiSwitch-thumb': {
            width: 15,
        },
        '& .MuiSwitch-switchBase.Mui-checked': {
            transform: 'translateX(9px)',
        },
    },
    '& .MuiSwitch-switchBase': {
        padding: 2,
        color: 'rgba(153,164,176,.6)',
        transform: 'translateX(-2px)',
        '&.Mui-checked': {
            transform: 'translateX(12px)',
            color: 'var(--primary-color)',
            '& + .MuiSwitch-track': {
                opacity: 1,
                backgroundColor: '#3bc11733',
            },
        },
    },
    '& .MuiSwitch-thumb': {
        boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
        width: 12,
        height: 12,
        borderRadius: 6,
        transition: theme.transitions.create(['width'], {
            duration: 200,
        }),
    },
    '& .MuiSwitch-track': {
        borderRadius: 16 / 2,
        opacity: 1,
        height: '70%',
        width:'90%',
        marginTop:'10%',
        backgroundColor:'rgba(0,0,0,.25)',
        boxSizing: 'border-box',
    },
}));
export default AntSwitch;