:root {
    --cSize: 30px;
    --cInactive: #232739;
    --cActive: #577af3;
    --particleSize: 0px;
    --cEasing: ease;
    --cTiming: 0.5s;
    --innerPaddingSize: 30px;
}

.particles-checkbox {
    height: var(--cSize);
    width: var(--cSize);
    display: inline-flex;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 3px #5a5b5e solid;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition: all var(--cTiming) var(--cEasing);
    margin: 2px;
}

    .particles-checkbox:focus {
        outline: 0;
    }

    .particles-checkbox:checked {
        background-color: var(--cActive);
    }

        .particles-checkbox:checked::after {
            background-color: #ffffff;
            height: calc(var(--cSize) * 0.3);
            width: calc(var(--cSize) * 0.3);
        }

        .particles-checkbox:checked::before {
            -webkit-animation: particleAnimate var(--cTiming) var(--cEasing) forwards;
            animation: particleAnimate var(--cTiming) var(--cEasing) forwards;
        }

        .particles-checkbox:checked + span {
            border-color: #577af3;
            color: black;
        }

    .particles-checkbox::before, .particles-checkbox::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: inherit;
        height: 0px;
        width: 0px;
    }

    .particles-checkbox::after {
        transition: all var(--cTiming) var(--cEasing);
    }

    .particles-checkbox::before {
        --particleSize: 4px;
        height: var(--particleSize);
        width: var(--particleSize);
        z-index: 2;
    }

@-webkit-keyframes particleAnimate {
    0% {
        box-shadow: 0px 0px 0px transparent, NaNpx NaNpx transparent, NaNpx NaNpx transparent, 0px 0px 0px transparent, NaNpx NaNpx transparent, NaNpx NaNpx transparent, 0px 0px 0px transparent, NaNpx NaNpx transparent, NaNpx NaNpx transparent;
        transform: rotate(0turn);
        opacity: 1;
    }

    50%, 100% {
        box-shadow: 0px 0px 0px transparent, -2.23929px 19.87424px #f94144, -19.49856px -4.45042px #f94144, 6.60558px -18.87767px #f94144, 18.01938px 8.67767px #f94144, -10.64064px 16.93448px #f94144, -15.63663px -12.4698px #f94144, 14.14214px -14.14214px #f94144, 0px 0px 0px transparent, -25.98076px -15px #f9c74f, 15px 25.98076px #f9c74f, 0px -30px #f9c74f, 0px 0px 0px transparent, -28.51221px -14.5277px #ffd166, 18.80913px 25.88854px #ffd166, -5.0059px -31.60603px #ffd166, -9.88854px 30.43381px #ffd166, 22.62742px -22.62742px #ffd166;
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(0.5turn);
    }
}

@keyframes particleAnimate {
    0% {
        box-shadow: 0px 0px 0px transparent, NaNpx NaNpx transparent, NaNpx NaNpx transparent, 0px 0px 0px transparent, NaNpx NaNpx transparent, NaNpx NaNpx transparent, 0px 0px 0px transparent, NaNpx NaNpx transparent, NaNpx NaNpx transparent;
        transform: rotate(0turn);
        opacity: 1;
    }

    50%, 100% {
        box-shadow: 0px 0px 0px transparent, -2.23929px 19.87424px #f94144, -19.49856px -4.45042px #f94144, 6.60558px -18.87767px #f94144, 18.01938px 8.67767px #f94144, -10.64064px 16.93448px #f94144, -15.63663px -12.4698px #f94144, 14.14214px -14.14214px #f94144, 0px 0px 0px transparent, -25.98076px -15px #f9c74f, 15px 25.98076px #f9c74f, 0px -30px #f9c74f, 0px 0px 0px transparent, -28.51221px -14.5277px #ffd166, 18.80913px 25.88854px #ffd166, -5.0059px -31.60603px #ffd166, -9.88854px 30.43381px #ffd166, 22.62742px -22.62742px #ffd166;
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(0.5turn);
    }
}

.particles-checkbox-container {
    display: inline-flex;
    margin: 20px;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: all var(--cTiming) var(--cEasing);
    width:90%;
}

    .particles-checkbox-container span {
        border: 3px solid transparent;
        border-radius: calc(var(--innerPaddingSize) * 0.5);
        padding: 10px;
        margin-left: 4px;
        padding: var(--innerPaddingSize);
        padding-left: calc(var(--cSize) + var(--innerPaddingSize) + 10px);
        width: 100%;
        color: #5a5b5e;
        transition: all var(--cTiming) var(--cEasing);
    }

    .particles-checkbox-container .particles-checkbox {
        position: absolute;
        left: var(--innerPaddingSize);
    }