.text-link {
  position: relative;
  --selection-inset-x: var(--space-8);
  --selection-inset-y: var(--space-4);
  color: var(--color-accent);
  font-weight: 500;
  font-size: var(--font-size-ui);
  line-height: var(--line-height-ui);
  text-decoration: underline;
  text-underline-position: from-font;
}

.text-link--dark {
  --selection-color: var(--color-accent-on-dark);
  --selection-color-pressed: var(--color-accent-on-dark);
  --selection-handle-fill: var(--color-ink);
  color: var(--color-accent-on-dark);
}

@media (hover: hover) {
  .text-link:has(> .selection):hover {
    color: var(--color-accent-hover);
    text-decoration: none;
  }

  .text-link--dark:has(> .selection):hover {
    color: var(--color-accent-on-dark);
  }
}

.text-link:has(> .selection):focus-visible {
  color: var(--color-accent-hover);
  text-decoration: none;
  outline-color: transparent;
}

.text-link--dark:has(> .selection):focus-visible {
  color: var(--color-accent-on-dark);
}

.text-link:has(> .selection) {
  isolation: isolate;
}

.text-link:has(> .selection)::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--selection-inset-y)) calc(-1 * var(--selection-inset-x));
  z-index: -1;
}

.text-link:has(> .selection):active {
  color: var(--color-accent-active);
  text-decoration: none;
  outline-color: transparent;
}

.text-link:has(> .selection):active::before {
  background: var(--color-accent-tint-active);
}

.text-link--dark:has(> .selection):active {
  color: var(--color-accent-on-dark);
}

.text-link--dark:has(> .selection):active::before {
  background: var(--color-ink-raised);
}