.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: 0;
                left: -19px;
                margin-right: 6px;
                background-image: url("/assets/themes/win98/icons/checkbox.png");
                content: "";
            }
        }

        &:checked + label::before {
            background-position: 0px -13px;
        }

        &:focus + label:not(:empty) {
            outline: 1px dotted rgb(0, 0, 0);
        }

        &[disabled] {
            + label {
                color: grey;
                text-shadow: 1px 1px 0 #fff;

                &::before {
                    background-position: 0px -26px;
                }
            }

            &:checked + label::before {
                background-position: 0px -39px;
            }
        }
    }

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

        &.os-checked input + label:before {
            background-position: 0px -52px;
        }
    }
}
