Add gap between outer and inner border of checkbox

I'm styling a bunch of form elements and need to customize the style of the checkbox. It needs to look like this when checked:

The closest I can get to that is as you see at this fiddle here: https://jsfiddle.net/ufhav6Lw/2/

I've tried using background-size:50%; at line 24 of the CSS in the fiddle.

How do I create the gap between the inner and outer square of the checkbox?