Custom Bootstrap 4 checkbox gets shrink on checked

I'm using customized checkbox using Bootstrap 4 and having the below issues:

The default height and width of the checkbox is 20x20. Initially, when I check the checkbox, its reducing the size to 18x18 at the time of focus and its reverting to its default size when I click outside.

It's occurs only when clicked on focus is happening

Please help me

 .checkbox-container {
     margin: 0.5rem 0 0.5rem;
}
 .checkbox-container .custom-checkbox .custom-control-label {
     color: #464646;
     cursor: pointer;
     font-size: 14px;
     line-height: 1.75;
     padding-left: 16px;
}
 .checkbox-container .custom-checkbox .custom-control-label::before {
     border-radius: 2px;
     border: solid 1px #dedede;
     cursor: pointer;
     height: 20px;
     left: -1.25rem;
     top: 0;
     width: 20px;
}
 .checkbox-container .custom-checkbox .custom-control-label::after {
     border-radius: 2px;
     cursor: pointer;
     height: 20px;
     left: -1.27em;
     top: -1px;
     width: 20px;
}
 .checkbox-container .custom-control-input:checked ~ .custom-control-label::before {
     background-color: #d93954;
     border: 1px solid #d93954;
}
 .checkbox-container .custom-control-input:checked ~ .custom-control-label::after {
     background-image: unset;
     color: #fff;
     content: "\f00c";
     font-family: 'Font Awesome 5 Free';
     left: -1.2em;
     top: 3px;
}
 .checkbox-container .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
     background-color: #d93954;
     border-color: #d93954;
}
 .checkbox-container .custom-control-input:focus ~ .custom-control-label::before {
     border: 1px solid #eee;
     box-shadow: 0 0 0 0.2rem #fff;
     outline-width: 0;
     width: 20px;
     height: 20px;
}
 .checkbox-container .custom-control-input:focus {
     -webkit-appearance: none;
     box-shadow: none;
     outline: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="checkbox-container custom-color">
<div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input">
        <label class="custom-control-label grey" for="checkbox">Custom Checkbox</label>
    </div>
</div>