@layer components {
  .heading__link {
    --opacity: 0.5;
    --size: 0.8em;

    background: url(link.svg) no-repeat center bottom 0.2em;
    background-size: var(--size);
    block-size: 1em;
    color: var(--color-link);
    display: inline-flex;
    font-size: var(--size);
    inline-size: var(--size);
    padding: 1em 0 0;
    opacity: var(--opacity);
    overflow: hidden;
    transition: opacity 300ms ease;
    vertical-align: middle;

    @media (hover: hover) {
      --opacity: 0;

      :is(h1, h2, h3, h4, h5, h6):hover & {
        --opacity: 0.5;
      }
    }

    @media (prefers-color-scheme: dark) {
      filter: invert(1);
    }
  }
}