/* Ajonapin kuvake, odotustila ja tuloste; toiminta: assets/js/playground.js.
 * Nappi on teeman oma koodilohkon nappi ja tuloste tavallinen koodilohko,
 * joten paikka, koko, värit ja reunat tulevat teemasta. */

:root {
  /* Teeman napit piirtävät kuvakkeen mask-imagella, joten tämä on samassa
   * muodossa: yksivärinen SVG, jonka värin nappi antaa. */
  --jyu-run-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 5.14v14l11-7z"/></svg>');
}

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

/* Ajon ajaksi nappi on poissa käytöstä, jottei samaa ohjelmaa lähetetä
 * kahdesti. Väri on palautettava erikseen: teeman .md-code__button:hover
 * värittää kuvakkeen aksentilla myös disabled-napissa, koska selain antaa
 * :hoverin sillekin. */
.md-code__button:disabled {
  cursor: default;
  opacity: 0.5;
}

.md-code__button:disabled:hover {
  color: var(--md-default-fg-color--light);
}

/* Kuten mdBookin .result-no-output: tyhjä tuloste on tulos siinä missä
 * muutkin, kursiivi erottaa sen ohjelman omasta tekstistä. */
.jyu-result-no-output {
  font-style: italic;
}

/* Jypelin kuvatuloste (playground.js: showImages) tulosteen alla. Lohkona,
 * jottei kuvan alle jää tekstirivin rakoa, ja kulmat kuten teeman
 * koodilohkoissa (.md-typeset pre > code: .4rem). Leveyden rajaa teema
 * (.md-typeset img: max-width: 100 %), kuten mdBookin .content img. */
.jyu-result-image {
  display: block;
  border-radius: 0.4rem;
}

/* Pelkkä kuva ilman tekstiä: tekstilaatikko pois. hidden-attribuutti ei
 * riittäisi, koska teeman .md-typeset pre antaa display: flow-root. */
.jyu-result-image-only > pre {
  display: none;
}

/* Paperille jää tuloste muttei nappiriviä; teemalla ei ole sille sääntöä,
 * koska rivi syntyy vain ruudulla. */
@media print {
  .md-code__nav {
    display: none;
  }
}