$checkboxSize: 10px;
$checkboxPadding: 4px;

.fsjs-block-type-checkboxes {
    [data-fsjs] label {
        cursor: pointer;
        padding: 5px 0;
        display: block;

        &:hover,
        &:focus {
            input[type=checkbox] + span:before {
                background: $bgColorHover;
            }
        }
    }

    input[type=checkbox] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        opacity: 0;
    }

    label.fsjs-checkbox-inactive {
        pointer-events: none;
        color: $disabledColor;

        input[type=checkbox] + span {
            
            &:before,
            &:after {
                border-color: $disabledColor;
            }
        }
        input[type=checkbox]:checked + span {
            &:after {
                background: $disabledColor;
            }
        }
    }

    input[type=checkbox] + span {
        position: relative;
        padding-left: $checkboxSize * 1.5 + $checkboxPadding * 2;

        &:before,
        &:after {
            content: " ";
            display: block;
            border: $borderWidth solid $baseColor;
            border-radius: $borderRadius;
            position: absolute;
            left: 0;
            top: -$checkboxPadding/2;
            padding: $checkboxPadding;
            height: $checkboxSize;
            width: $checkboxSize;
        }
    }

    input[type=checkbox]:checked + span {
        &:after {
            border-radius: 0;
            background: $baseColor;
            padding: 0;
            top: -$checkboxPadding/2 + $checkboxPadding;
            left: $checkboxPadding;
        }
    }
}