/////////////////////
// checkbox controls
/////////////////////
.customize-control {
    input[type="checkbox"] {
        position: relative;
        margin: 0 1rem 0 0;
        cursor: pointer;
        margin-bottom: 5px;
        width: 22px;
        height: 22px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        &: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: #f2f2f2;
            cursor: pointer;
            border-radius: 3px;
            -webkit-border-radius: 3px;
        }
        &:checked {
            &:before {
                content: "\f147";
                font-family: dashicons;
                font-size: 25px;
                left: 0;
                top: 2px;
            }
            &:after {
                background: #fff;
            }
        }
    }
}