/* 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, kopiointi
 * kopioi sen); vain näkyminen on kiinni luokasta. */
.md-typeset .hide-boring .boring {
  display: none;
}

/* Esiin otettu piilorivi jää himmeäksi, jolloin näkee mikä oli piilossa;
 * sama 0.6 kuin mdBookissa. */
.md-typeset .boring {
  opacity: 0.6;
}