$checkboxSize: 20;
$checkboxMargin: 2;

label.custom-checkbox-container {
    display: inline-block;
    position: relative;
    min-height: $checkboxSize + $checkboxMargin * 2 + 0px;
    line-height: $checkboxSize + $checkboxMargin * 2 + 0px;
    margin: 0;
    padding-left: $checkboxSize + $checkboxMargin * 2 + 1 + 0px;
    font-weight: 500;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    &:hover input ~ .custom-checkbox-checkmark {
        background-color: $custom-checkbox-face-hover-color;
    }

    input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;

        &:checked ~ .custom-checkbox-checkmark {
            background-color: $custom-checkbox-face-checked-color;
            border: 0;

            &:after {
                display: block;
            }
        }

        &:disabled ~ .custom-checkbox-checkmark {
            background-color: $custom-checkbox-face-disabled-color;
            cursor: not-allowed;
        }

        & + .custom-checkbox-checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: $checkboxSize + 0px;
            width: $checkboxSize + 0px;
            margin: $checkboxMargin + 0px;
            background-color: $custom-checkbox-face-color;
            border: 1px solid $custom-checkbox-border-color;

            &:after {
                content: "";
                position: absolute;
                display: none;
                left: 50%;
                top: 50%;
                width: $checkboxSize / 4 + 1 + 0px;
                height: $checkboxSize / 2 + 0px;
                border: solid $custom-checkbox-icon-color;
                border-width: 0 $checkboxSize / 7 + 0px $checkboxSize / 7 + 0px 0;
                -webkit-transform: rotate(45deg) translate(-110%,-25%);
                -ms-transform: rotate(45deg) translate(-110%,-25%);
                transform: rotate(45deg) translate(-110%,-25%);
            }
        }
    }
}
