/* Highlight marks painted by reader.js. The colours are variables so a theme
   (light, sepia, dark, black) can retune them; a highlight with a comment
   carries a dotted underline. Used by the web reader and the iOS reader. */

.th-highlight {
  --th-highlight-yellow: rgba(255, 224, 102, 0.55);
  --th-highlight-green: rgba(140, 220, 140, 0.5);
  --th-highlight-blue: rgba(140, 190, 255, 0.5);
  --th-highlight-pink: rgba(255, 160, 200, 0.5);
  --th-highlight-purple: rgba(200, 160, 255, 0.5);

  background-color: var(--th-highlight-yellow);
  color: inherit;
  border-radius: 2px;
  padding: 0.08em 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  cursor: pointer;
}

.th-highlight[data-color="green"] { background-color: var(--th-highlight-green); }
.th-highlight[data-color="blue"] { background-color: var(--th-highlight-blue); }
.th-highlight[data-color="pink"] { background-color: var(--th-highlight-pink); }
.th-highlight[data-color="purple"] { background-color: var(--th-highlight-purple); }

.th-highlight[data-comment="true"] {
  text-decoration: underline dotted currentColor;
  text-underline-offset: 0.2em;
}

.th-highlight.is-active {
  outline: 2px solid rgba(0, 0, 0, 0.25);
  outline-offset: 1px;
}

@media (prefers-color-scheme: dark) {
  .th-highlight {
    --th-highlight-yellow: rgba(255, 210, 60, 0.35);
    --th-highlight-green: rgba(120, 210, 120, 0.35);
    --th-highlight-blue: rgba(120, 170, 255, 0.35);
    --th-highlight-pink: rgba(255, 140, 190, 0.35);
    --th-highlight-purple: rgba(190, 150, 255, 0.35);
  }
}