.os-checkbox {
    display: block;
    margin: 8px 0px;

    input[type="checkbox"] {
        width: 0;
        height: 0;
        appearance: none;
        margin: 0;
        background: 0;
        position: fixed;
        opacity: 0;
        border: none;

        + label {
            height: 13px;
            position: relative;
            margin-left: 19px;

            &:before {
                width: 13px;
                height: 13px;
                display: inline-block;
                position: absolute;
                top: -1px;
                left: -19px;
                margin-right: 6px;
                background-image: url("/assets/themes/winXP/icons/checkbox.png");
                background-position: 0px 0px;
                content: "";
                box-shadow: none;
            }
        }

        &:focus + label:not(:empty) {
            outline: 1px dotted #000000;
        }

        &:checked + label:after {
            width: 7px;
            height: 7px;
            display: block;
            position: absolute;
            top: 2px;
            left: -16px;
            content: "";
            background: url("/assets/themes/winXP/icons/checkbox-checkmark.png");
            background-position: 0px 0px;
        }

        &:disabled {
            + label {
                color: #a1a192;
    
                &::before {
                    background-position: 0px -39px;
                }
            }
    
            &:checked + label::after {
                background-position: 0px -7px;
            }
        }
    }

    &:hover:not(.os-disabled) input + label:before {
        background-position: 0px -13px;
    }

    &:active:not(.os-disabled) input + label:before {
        background-position: 0px -26px !important;
    }
}
