.link {
  font-weight: 500;
  transition: opacity 0.2s;

  &:hover {
    opacity: 0.85;
  }

  &:active {
    opacity: 0.7;
  }

  &[target='_blank']:after {
    content: '↗';
    margin-left: 0.2em;
    margin-right: 0.1em;
    font-size: 0.7em;
    font-weight: 700;
    transition: transform 0.2s;
    display: inline-block;
    transform: translate(0, -0.3em);
  }
}

.link,
:global(summary) .link {
  &:not(:global(.header-anchor)) {
    font-weight: 500;
    color: var(--rp-c-link);
    transition: color 0.25s;
  }

  &:hover {
    border-bottom: 1px solid var(--rp-c-brand);
  }
}