.checkbox-custom {
    opacity: 0;
    position: absolute;  
    
    .checkbox-custom-label {
        display: inline-block;
        vertical-align: middle;
        margin: 5px;
        cursor: pointer;
        position: relative;
    }
}


.checkbox-custom + .checkbox-custom-label:before {
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    background-color: currentColor;

    span {
        color: $text-color!important;
    }
}

.checkbox-custom:focus + .checkbox-custom-label {
  outline: 1px solid #ddd; /* focus style */
}