:root {
  /* Component aliases only; visual values are owned by custom/base. */
  --reading-highlight-bg: var(--highlight-soft);
  --reading-highlight-mark: var(--highlight);
}

html[data-reading-highlights='on'] .reading-highlight {
  background: linear-gradient(90deg, var(--reading-highlight-bg), transparent 88%);
  box-shadow: inset 0.18rem 0 var(--reading-highlight-mark);
  border-radius: var(--radius-sm);
  padding-inline: 0.85rem 0.35rem;
  margin-inline: -0.85rem -0.35rem;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--reading-highlight-mark) 55%, transparent);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
  transition:
    background-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

#reading-highlights-toggle[aria-pressed='true'] {
  color: var(--sidebar-active-color, currentColor);
}

#reading-highlights-toggle:not([data-reading-highlights-ready]) {
  display: none;
}

#reading-highlights-toggle:focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--focus-offset-compact);
}

@media (prefers-reduced-motion: reduce) {
  html[data-reading-highlights='on'] .reading-highlight {
    transition: none;
  }
}

@media (forced-colors: active) {
  html[data-reading-highlights='on'] .reading-highlight {
    background: transparent;
    box-shadow: inset 0.18rem 0 Highlight;
    text-decoration-color: Highlight;
    forced-color-adjust: auto;
  }

  #reading-highlights-toggle[aria-pressed='true'] {
    outline: 1px solid Highlight;
  }
}