@mixin external-link-icon {
  &::after {
    content: "";

    display: inline-block;
    flex-shrink: 0;

    width: 11px;
    height: 11px;
    margin-top: -1px;
    margin-inline-start: 4px;

    background: var(--external-link-c-icon);

    mask-image: var(--external-link-icon);
  }
}

.vp-external-link-icon {
  @include external-link-icon;
}

.external-link-icon {
  .external-link:not(.no-external-link-icon) {
    @include external-link-icon;
  }

  [vp-content] {
    a[href*="://"],
    a[target=_blank] {
      &:not(.no-external-link-icon) {
        @include external-link-icon;
      }
    }
  }
}