:root {
  --link-color: var(--hyperlink-color);
  --link-hover-color: var(--hyperlink-engaged-color);
  --line-underline-color: var(--link-color);
  --line-underline-hover-color: transparent;
  --link-icon-color: var(--color-orange);
  --link-icon-size: 0.9em;
  --link-icon-gap: 0.5em;
  --link-font-weight: var(--font-weight-bold);
}

.link {
  color: var(--link-color);
  font-weight: var(--link-font-weight);
  transition-property: color;

  &:is(:hover:not([disabled]), :focus:not(.has-invisible-focus)) {
    color: var(--link-hover-color);
  }
}

.link__text {
  --underline-color: var(--line-underline-color);
  --underline-color--enter: var(--line-underline-hover-color);
  --underline-height: 2px;
}

.link__icon {
  color: var(--link-icon-color);
  font-size: var(--link-icon-size);
  margin-inline: 0.3em var(--link-icon-gap);
  vertical-align: baseline;
  white-space: nowrap;
}