How I can apply display:none property to #checkbox

display:none doesn't wroks for #checkbox
https://codepen.io/Nicitaa/pen/QWVPzvw

I want #checkbox display:none when input[type="checkbox"]:not(:checked)::after pic

I tried
input[type="checkbox"]:not(:checked)::after, #checkbox { display: none; }
input[type="checkbox"]:not(:checked)::after + #checkbox { display: none; }
input[type="checkbox"]:not(:checked)::after ~ #checkbox { display: none; }

If you need more information - leave comment

@form:rgba(0,255,0,1);
@form-hover:rgba(255,255,0,0.8);
@form-opacity:rgba(255,0,0,0.6);

body {
  background-color:#202020;
}
.bx {
        position: absolute;
        top: 0;
        left: 2.5px;
        pointer-events:none;
    }

input[type="checkbox"] {
    appearance:none;
    outline: none;
    -webkit-appearance:0;
    min-height:15px;
    min-width: 15px;
    max-height:15px;
    max-width: 15px;
    margin:0px 5px 0px 3px;
    border-radius:2px;
    box-shadow:1px 1px 3px rgba(0,0,0,1);
 // To set checked at center
 display: flex;
 justify-content: center;
 align-items: center;
}
input[type="checkbox"]::after {
    content:"\f00c";
    font-family: "Font awesome 5 Free";
    font-weight: 900;
    font-size:6px;
    color:#000000;
}

input[type="checkbox"]:not(:checked)::after, #checkbox {
    display: none;
}
input[type="checkbox"]:not(:checked) {
    background-color:  @form-opacity;
}
input[type="checkbox"]:not(:checked):hover {
    background-color:  @form-hover;
}
input[type="checkbox"]:not(:checked):active {
    background-color:  @form;
}
input[type="checkbox"]:checked {
    background-color: @form;
}
input[type="checkbox"]:checked:hover {
    background-color: @form-hover;
}
input[type="checkbox"]:checked:active {
    background-color: @form-opacity;
}
input[type="checkbox"]:checked::after, #checkbox {
    display: flex;
}

<!-- box icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">

<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

<div class="login_body_help">
  <div class="checkbox">
    <input type="checkbox" id="check" checked>
    <i class='bx bx-check' id="checkbox"></i>
    <p>Remember me</p>
  </div>
  <a href="#">Forgot password?</a>
</div>