@extend works only partially or Issue with @at-root inside of @extend - Codepen

So - I've been quickly typing some animation to highlight an anchor tag by extending its underline to full height on hover with the help of Sass, but that's beside the point.

My goal is to extend the a.link [&.link {…}] and .link [@at-root .link {…}] class selector from within the parent a tag.

a {
  &.link { @extend %animation--anchor; }

  @at-root .link { @extend %animation--anchor; }
}

This works, unless I add a &:hover pseudo selector to my silent class, then it won't extend any pseudo class/selector. I know that when using the @extend directive on multiple elements it will work. So we can kinda isolate the cause of the issue to the @at-root .link selector.

Here is what it compiles to without a pseudo class/selector

a.link, .link {
  position: relative;
  text-decoration: none;
  border-bottom: solid 2px #2196f3;
}

What it compiles to with

a.link, .link {
  position: relative;
  text-decoration: none;
  border-bottom: solid 2px #2196f3;
}
.link:hover::before {
  height: 100%;
}
.link::before {
  content: "";
  position: absolute;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background-color: #2196f3;
  z-index: -1;
  transition: height 500ms cubic-bezier(0.25, 0.1, 0.2, 1.5);
}

Here is the code in question

$disable-inherited-anchorStyling: true;

$anchor--underlineColor: #2196f3;
$transition--short: 500ms;
$transition--in-out: cubic-bezier(0.25, 0.1, 0.2, 1.5);

%animation--anchor {
  position: relative;
  text-decoration: none;
  border-bottom: solid 2px $anchor--underlineColor;

  &:hover::before {
    height: 100%;
  }

  &::before {
    content: "";
    position: absolute;
    bottom: -1px;
    height: 1px;
    width: 100%;
    background-color: $anchor--underlineColor;
    z-index: -1;
    transition: height $transition--short $transition--in-out;
  }
}

a {
  @if ($disable-inherited-anchorStyling) {
    color: inherit;

    &:focus {
      outline: 0;
    }
  }

  &.link { @extend %animation--anchor; }

  @at-root .link { @extend %animation--anchor; }
}