/* Piilorivit ja silmänappi; toiminta: assets/js/hidelines.js. Nappi on teeman
 * oma koodilohkon nappi, joten tässä on vain kaksi kuvaketta ja rivin
 * piilotus. */

:root {
  /* Teeman napit piirtävät kuvakkeen mask-imagella, joten nämä ovat samassa
   * muodossa: yksivärinen SVG, jonka värin nappi antaa. */
  --jyu-eye-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 9a3 3 0 0 1 3 3 3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12a9.821 9.821 0 0 0 17.64 0 9.821 9.821 0 0 0-17.64 0"/></svg>');
  --jyu-eye-off-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.83 9 15 12.16V12a3 3 0 0 0-3-3zm-4.3.8 1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .43-.03.64-.08l1.55 1.55c-.67.33-1.41.53-2.19.53a5 5 0 0 1-5-5c0-.78.2-1.52.53-2.2M2 4.27l2.28 2.28.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22 21 20.73 3.27 3zM12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7"/></svg>');
}

.md-code__button[data-md-type="hidelines"]::after {
  -webkit-mask-image: var(--jyu-eye-icon);
  mask-image: var(--jyu-eye-icon);
}

.md-code__button[data-md-type="hidelines"][aria-pressed="true"]::after {
  -webkit-mask-image: var(--jyu-eye-off-icon);
  mask-image: var(--jyu-eye-off-icon);
}

/* Rivi on HTML:ssä tallessa myös piilotettuna (ajonappi lähettää sen); vain
 * näkyminen on kiinni luokasta. Piilorivi on lohko, jotta silmän painallus
 * voi liu'uttaa sen auki (korkeus 0 → rivi) ja häivyttää sen himmeyteensä
 * (0.6 kuten mdBookissa); samalla näkyvien rivien sisennys (hidelines.js:
 * dedent) levenee nollasta omaan mittaansa. Pitkä piilorivi levenee sisällön
 * mukaan kuten korostettu rivi (highlights.css), ettei overflow leikkaisi
 * sitä; korostetulla rivillä on omat mittansa. Piilotilassa visibility
 * poistaa tekstin innerTextistä, hausta ja ruudunlukijalta, joten
 * kopiointinappi (innerText) saa piilorivin ja sisennyksen leikepöydälle
 * vain silmällä esiin otettuina. */
.md-typeset .highlight code > .boring {
  display: block;
  overflow: hidden;
  height: 1lh;
  opacity: 0.6;
}

.md-typeset .highlight code > .boring:not(.hl-line) {
  width: max-content;
  min-width: 100%;
}

.md-typeset .highlight code.hide-boring > .boring {
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.md-typeset .highlight .jyu-indent {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: calc(var(--jyu-indent, 0) * 1ch);
}

.md-typeset .highlight code.hide-boring .jyu-indent {
  width: 0;
  visibility: hidden;
}

/* Siirtymä vain lohkossa, jonka silmää on painettu (jyu-toggled): sivun
 * latautuessa jo piirretty rivi ei saa sulkeutua animaationa. Piilotettaessa
 * visibility vaihtuu vasta siirtymän päätyttyä, näytettäessä heti. */
.md-typeset .highlight code.jyu-toggled > .boring,
.md-typeset .highlight code.jyu-toggled .jyu-indent {
  transition: height 0.3s, width 0.3s, opacity 0.3s, visibility 0s;
}

.md-typeset .highlight code.jyu-toggled.hide-boring > .boring,
.md-typeset .highlight code.jyu-toggled.hide-boring .jyu-indent {
  transition: height 0.3s, width 0.3s, opacity 0.3s, visibility 0s 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .highlight code.jyu-toggled > .boring,
  .md-typeset .highlight code.jyu-toggled .jyu-indent {
    transition: none;
  }
}

/* Kopioitaessa lohkotason rivi lisäisi innerTextiin rivinvaihdon rivin oman
 * vaihdon lisäksi, joten esiin otettu piilorivi on kopioinnin ajan contents
 * kuten korostettu rivi (highlights.css). Piilossa oleva on none: visibility
 * riittäisi tekstin poistoon, mutta contents painavampana voittaisi
 * korostetun piilorivin piilotuksen, ja tämä on vielä painavampi. */
.md-typeset .highlight code[data-md-copying] > .boring {
  display: contents;
}

.md-typeset .highlight code[data-md-copying].hide-boring .boring {
  display: none;
}