:root {
    /*按钮宽度*/
    --button-width: 75px;
    /*按钮高度*/
    --button-height: 30px;
    /*内圆直径*/
    --toggle-diameter: 25px;
    /*按钮与内圆之间的距离*/
    --button-toggle-offset: calc(calc(var(--button-height) - var(--toggle-diameter)) / 2);
    /*内圆阴影的大小*/
    --toggle-shadow-offset: 10px;
    /*内圆在长按下的宽度*/
    --toggle-wider: 32px;
    /*浅灰色*/
    --color-grey: #39393D;
    /*深灰色*/
    --color-dark-grey: #232323;
    /*绿色*/
    --color-green: #B22D2D;
}

#pmem span {
    content: '';
    display: inline-block;
    position: relative;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-grey);
    border-radius: calc(var(--button-height) / 2);
    transition: .3s all ease-in-out;
}

    #pmem span::after {
        content: '';
        display: inline-block;
        position: absolute;
        width: var(--toggle-diameter);
        height: var(--toggle-diameter);
        background-color: #fff;
        border-radius: calc(var(--toggle-diameter) / 2);
        top: calc(var(--button-toggle-offset));
        transform: translateX(calc(var(--button-toggle-offset)));
        box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0,0,0,.10);
        transition: .3s all ease-in-out;
    }

#pmem input[type="checkbox"]:checked + span {
    background-color: var(--color-green);
}

#pmem input[type="checkbox"]:checked + span::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0,0,0,.10);
}

#pmem input[type="checkbox"]:active + span::after {
    width: var(--toggle-wider);
}

#pmem input[type="checkbox"]:checked:active + span::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

#toggle {
    display: none;
}

@media(prefers-color-scheme: dark) {
    #pmem span {
        background-color: var(--color-dark-grey);
    }

    #pmem span:hover {
        border: 2px solid blue;
    }

    #pmem  input[type="checkbox"]:checked + span:hover {
        border: none;
    }
}