How to style a custom checkbox in SCSS

index

<input type="checkbox" class="real-checkbox" name="checkbox" id="checkbox1" />
<label for="checkbox1"><span class="fake-checkbox"> X </span>Crushing</label>

styles

.fake-checkbox {
    font-size: 1.5em;
    padding: .15em .45em;
    background-color: #fff;
    display: inline-block;
    cursor: pointer;
}

.real-checkbox {
    display:none;
    
    + label .fake-checkbox {
        color: #fff;
    }
    
    &:checked {
        
        + label .fake-checkbox {
            color: $secondary;
        }

    }
    
}