Sass doging card header

Question

I am new to Sass and I have the following setup:

<div class="card Card">
    <div class="card-header d-flex justify-content-between">
        <span class="card-title">Title</span>
        <i class="fa fa-pen Icon" role="img"></i>
    </div>
    <Edt [...]/>
</div>

With the following behavior: (I) default: the header is hidden, (II) hover: the title is semi-transparent, the icon is visible, (III) focus: the title is visible and the icon is visible. (IV) hover icon: primary color is assigned. The following Sass does the job:

.Icon:hover {
  color: $primary;
}
.Card:hover {
  @extend .border-secondary;
  .card-header {
    filter: opacity(0.8);
    > .Icon {
      scale: 1;
    }
  }
  &:focus-within {
    @extend .border-primary;
  }
}

.Card:focus-within {
  .card-header {
    filter: opacity(1);
    > .Icon {
      scale: 1;
    }
  }
  @extend .border-primary;
}

.Card > .card-header {
  filter: opacity(0.5);
  > .Icon {
    scale: 0;
  }
}

But this is basically the same hierarchy three times, but with different psudos. There is a lot of redundant code. How can I combine the three .Card classes into one? There should be a way, but I cannot figure it out right now.

The next step would be to animate the transition between the states. But I have no idea where to start with that, or if I would need js for that purpose.

Thanks in advance for the help!