@mixin custom-checkbox() {
    position: relative;
    margin: 0 1rem 0 0;
    cursor: pointer;
    margin-bottom: 5px;
    width: 22px;
    height: 22px;
    &:before {
        content: "";
        position: absolute;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        border: none;
    }
    &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        cursor: pointer;
    }
    &:checked {
        &:before {
            border: 4px solid #4caf50;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            width: 14px;
            height: 6px;
            top: 6px;
            left: 5px;
            border-top-style: none;
            border-right-style: none;
        }
        &:after {
            background: #f2f2f2;
        }
    }
}

// Checkbox & Multicheck Controls
.customize-control-checkbox,
.customize-control-multicheck {
    input[type="checkbox"] {
        @include custom-checkbox();
    }
}