input:checked not acting on a label CSS

i'm new learner and i try to understand how checkbox work, i try to make an Heart checkbox that's color when it's checked, and i do it with checked heart covering empty heart, but it's not working...

It's seem the input don't act on the label...

thank you in advance

I put the code on Codepen : https://codepen.io/steven-fabre/pen/KKNJdBP

input[type="checkbox"]{
    display: none;
}

.heart_checked {
    opacity: 0;
    z-index: 999;
  }

.heart_checked {
    font-weight: bold;
    background:  -webkit-linear-gradient(#9356dc, #FF79DA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

label{
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 25px;
}

.fa-heart,input{
    cursor: pointer;
    position: absolute;
    right: 24px;
}


label > input[type="checkbox"]:checked + .heart_checked {
    opacity: 1;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<label>
  <input type="checkbox">
  <i class="far fa-heart"></i>
  <i class="fas fa-heart heart_checked"></i>
</label>