scss mixin with focus: mixin with focus not working

Update: here is the full code: codepen

I have below HTML: here is the full code

 <input id="id1" value="planner" type="checkbox" />
 <label for="id1">Name</label>

Before the label I want to insert an icon so I have the below the CSS file.

input[type=checkbox] + label:before { 
  @include custom_square; 
  content:'';
  display: inline-block;
}

my custom icon mixin is as below:

@mixin custom_square {
    width: 10px;
    height: 10px;
    border-radius:20%;
    border:1px solid #0069aa;
    margin-right:0.3rem;
    &:focus::after {
      border:1px solid #ffffff;
    }
  }

now when user focus the lable it does color change the css for it as below:

input[type=checkbox]:focus + label,
    input[type=radio]:focus + label {color: #fff;}

Also, I want to change the border color of the square to white on the focus of it, I have added &:focus::after pseudo element in the mixin custom_square but it seems it is not working, any clue?

P.S: I don't want to use font-awesome icons, instead I will be creating my own icons and would be inserting that as shown above: