/* Korostetut rivit (vihreä, keltainen, punainen); rivit merkitsee
 * assets/js/highlights.js. mdBookin peittovärejä ei kopioida, koska
 * Zensicalin syntaksivärit ovat koodin taustaa vasten tasan WCAG AA:n
 * rajalla eikä peitto saa pudottaa niitä: kirkkaus pidetään, vain sävy
 * vaihtuu. Vasempaan reunaan tulee lisäksi täysivärinen palkki kuten teeman
 * omassa korostuksessa, koska sävy yksin ei erotu puna-vihersokealle. */

:root {
  --jyu-hl-green: hsl(130, 75%, 90%);
  --jyu-hl-green-edge: hsl(130, 60%, 32%);
  --jyu-hl-yellow: hsl(50, 90%, 87%);
  --jyu-hl-yellow-edge: hsl(45, 90%, 33%);
  --jyu-hl-red: hsl(5, 90%, 93%);
  --jyu-hl-red-edge: hsl(5, 70%, 50%);
}

/* Tummassa teemassa samat sävyt koodin taustan (code.css) kirkkaudessa. */
[data-md-color-scheme="slate"] {
  --jyu-hl-green: hsl(130, 70%, 11%);
  --jyu-hl-green-edge: hsl(130, 50%, 45%);
  --jyu-hl-yellow: hsl(50, 70%, 11%);
  --jyu-hl-yellow-edge: hsl(45, 70%, 45%);
  --jyu-hl-red: hsl(5, 70%, 17%);
  --jyu-hl-red-edge: hsl(5, 70%, 58%);
}

/* Rivin muoto on teeman oma (.highlight .hll): lohko, joka ulottuu koodin
 * sisennyksen (1.25em) verran reunasta reunaan. Leveys on lisä: <code>
 * vierittää itse, joten lohkotason lapsi jäisi näkyvän leveyden mittaiseksi
 * ja pitkän rivin korostus katkeaisi. min-widthissä on rivin oma sisennys
 * mukana, koska laatikkomalli on border-box. */
.md-typeset .highlight .hl-line {
  display: block;
  width: max-content;
  min-width: calc(100% + 2.5em);
  padding: 0 1.25em;
  margin: 0 -1.25em;
}

.md-typeset .highlight .hl-green {
  background-color: var(--jyu-hl-green);
  box-shadow: inset 2px 0 0 var(--jyu-hl-green-edge);
}

.md-typeset .highlight .hl-yellow {
  background-color: var(--jyu-hl-yellow);
  box-shadow: inset 2px 0 0 var(--jyu-hl-yellow-edge);
}

.md-typeset .highlight .hl-red {
  background-color: var(--jyu-hl-red);
  box-shadow: inset 2px 0 0 var(--jyu-hl-red-edge);
}

/* Kopioitaessa teema piilottaa rivien rakenteen (data-md-copying), jottei
 * lohkotason rivi lisäisi leikepöydälle rivinvaihtoja; sama korostetulle. */
.md-typeset .highlight code[data-md-copying] .hl-line {
  display: contents;
}