Laverna/laverna

/**
 * Checkbox module
 */
.task--checkbox {
    position : relative;
    cursor   : pointer;
    &:hover {
        color: lighten(@text-color, 15%);
    }
}

// Text
.checkbox--text {
    margin-left: 10px;
    font-weight: 300;

    // Create checkbox border block
    &::before {
        content : ' ';
        width   : @check--size;
        height  : @check--size;

        // Borders
        border        : @check--border;
        border-radius : @check--border-radius;

        // Position
        position : absolute;
        left     : 0;
        top      : 3px;
    }
}

.checkbox--svg {
    width    : @check--icon--size;
    height   : @check--icon--size;
    position : absolute;
    top      : 6px;
    left     : 3px;
}

.checkbox--path {
    fill           : none;
    stroke         : @check--color;
    stroke-width   : 20px;
    stroke-linecap : round;

    stroke-dasharray  : 126.366, 126.366;
    stroke-dashoffset : 126.6;
    transition        : stroke-dashoffset 0.2s ease-in-out 0s;
    stroke-linejoin   : round;
}

.checkbox--input {
    opacity: 0;

    &:checked {
        & ~ .checkbox--text {
            text-decoration: line-through;
        }
        & + svg path {
            stroke-dashoffset: 0;
        }
    }
}