input[type="checkbox"].CheckLock {
    display: none;
}

    input[type="checkbox"].CheckLock + label {
        --size: 2rem;
    }

    input[type="checkbox"].CheckLock + label > .LockWrapper,
    input[type="checkbox"].CheckLock + label > .LockWrapper * {
        transition: all 150ms;
    }

input[type="checkbox"].CheckLock + label > .LockWrapper {
    --bg: #cfc;
    --fg: #060;
    --adjust: 0%;
    width: var(--size);
    height: var(--size);
    background: var(--bg);
    border-radius: calc(var(--size) / 2);
    cursor: pointer;
    position: relative;
}

input[type="checkbox"].CheckLock:checked + label > .LockWrapper {
    --bg: #fcc;
    --fg: #600;
    --adjust: 5%;
}

    input[type="checkbox"].CheckLock + label > .LockWrapper .Shackle {
        --stroke: calc(var(--size) / 12);
        --curve: calc(var(--stroke) / 3);
        position: absolute;
        top: calc(16% + var(--adjust));
        left: 34%;
        width: calc(0.30 * var(--size));
        height: 20%;
        border: var(--stroke) solid var(--fg);
        border-bottom: none;
        border-radius: 50% 50% var(--curve) 0;
    }

        input[type="checkbox"].CheckLock + label > .LockWrapper .Shackle::before {
            content: '';
            position: absolute;
            top: 100%;
            left: calc(var(--size) / -12);
            height: 100%;
            border-left: inherit;
        }

    input[type="checkbox"].CheckLock + label > .LockWrapper .Lock {
        position: absolute;
        top: calc(44% - var(--adjust));
        left: 30%;
        width: 40%;
        height: 40%;
        background: var(--fg);
        border-radius: calc(var(--size) / 16);
    }

    input[type="checkbox"].CheckLock + label > .LockWrapper .KeyholeTop {
        position: absolute;
        top: 20%;
        width: 30%;
        height: 30%;
        background: var(--bg);
        left: 35%;
        border-radius: 50%;
    }

    input[type="checkbox"].CheckLock + label > .LockWrapper .KeyholeBot {
        position: absolute;
        top: 40%;
        width: 12%;
        height: 30%;
        background: var(--bg);
        left: 44%;
        --round: calc(var(--size) / 45);
        border-radius: 0 0 var(--round) var(--round);
    }