/* Alerttilaatikot: reunus laatikon ympäri, väri vain otsikkorivillä, kuten
 * Materialin classic-variantissa. Ei theme.variant: classic, koska se
 * vaihtaisi koko sivuston kirjasimet, kuvakkeet ja välistykset; halutaan
 * vain laatikot.
 *
 * Kaksi poikkeamaa classicista: tekstikoko on leipätekstin (font-size:
 * inherit, kuten mdBookissa; seuraa myös print.css:n kokoa), ja väljyys on
 * suurempi, koska kokoeroa ei enää ole erottamaan laatikkoa.
 *
 * Tarkkuus: teeman säännöt ovat tyyppikohtaisia (.md-typeset .admonition.note)
 * ja tämä tiedosto ladataan teeman jälkeen, joten sama tarkkuus voittaa mutta
 * pienempi ei. Siksi alempana [class]- ja [dir=ltr]-etuliitteet. */

/* Tyypin väri yhteen muuttujaan reunukselle, otsikkopalkille ja kuvakkeelle.
 * Värit ovat Materialin oletukset; vain sijoittelu muuttuu. */
.md-typeset .note     { --adm: #448aff; }
.md-typeset .abstract { --adm: #00b0ff; }
.md-typeset .info     { --adm: #00b8d4; }
.md-typeset .tip      { --adm: #00bfa5; }
.md-typeset .warning  { --adm: #ff9100; }
.md-typeset .danger   { --adm: #ff1744; }

/* Laatikko. Oletusväri on note'n sininen, kuten teemalla: sen saavat
 * tyypittömät <details>-lohkot. */
.md-typeset .admonition,
.md-typeset details {
  font-size: inherit;
  padding: 0 1rem;
  background-color: var(--md-default-bg-color);
  border: .075rem solid var(--adm, #448aff);
  border-radius: .2rem;
  box-shadow: var(--md-shadow-z1);
}

/* Teeman tyyppikohtainen taustaväri pois; [class] vain nostaa tarkkuuden. */
.md-typeset .admonition[class],
.md-typeset details[class] {
  background-color: var(--md-default-bg-color);
}

/* Alalaitaan sama väljyys kuin sivuille; teeman sääntö on html-etuliitteinen. */
html .md-typeset .admonition > :last-child,
html .md-typeset details > :last-child {
  margin-bottom: 1rem;
}

/* Otsikkorivi omaksi palkikseen laatikon yläreunaan. Negatiivinen
 * sivumarginaali vetää palkin laatikon reunoihin, koska väljyys on laatikon
 * paddingissa. */
[dir=ltr] .md-typeset .admonition-title,
[dir=ltr] .md-typeset summary {
  margin: 0 -1rem 1em;
  padding: .5rem 1rem .5rem 2.8rem;
  background-color: color-mix(in srgb, var(--adm, #448aff) 10%, transparent);
  border-radius: .1rem .1rem 0 0;
}

/* Kuvake otsikkorivin ensimmäisen tekstirivin keskelle; teeman oma sijainti
 * on laskettu ilman palkkia. */
[dir=ltr] .md-typeset .admonition-title:before,
[dir=ltr] .md-typeset summary:before {
  top: .9em;
  left: 1rem;
}


/* Kuvakkeet: sarja pysyy Luciden. Huomautus (note) saa info-ympyrän kuten
 * mdBookissa; teeman paperiliitin ei kerro huomautuksesta mitään. Todo (info)
 * saa kysymysmerkin, koska info-ympyrä on varattu eivätkä tyypit muuten
 * erottuisi kuin sinisen sävystä. Kuvakkeet ovat teeman omia muuttujia,
 * joten riittää osoittaa toiseen niistä. */
.md-typeset .note > .admonition-title:before,
.md-typeset .note > summary:before {
  -webkit-mask-image: var(--md-admonition-icon--info);
  mask-image: var(--md-admonition-icon--info);
}

.md-typeset .info > .admonition-title:before,
.md-typeset .info > summary:before {
  -webkit-mask-image: var(--md-admonition-icon--question);
  mask-image: var(--md-admonition-icon--question);
}

/* Sisällötön otsikkorivi ei saa jättää alleen tyhjää kaistaletta; sama
 * sääntö on Materialin classicissa. */
html .md-typeset .admonition-title:last-child,
html .md-typeset summary:last-child {
  margin-bottom: 0;
}

/* Suljettu <details> tarvitsee saman erikseen: :last-child katsoo DOM:ia, ja
 * suljetun lohkon sisältö on paikallaan, vain piirtämättä. */
html .md-typeset details:not([open]) > summary {
  margin-bottom: 0;
}


/* Avattavat osiot: raa'at <details>-lohkot ilman admonition-tyyppiä saavat
 * teemalta note'n sinisen ja paperiliittimen, jolloin ne näyttävät alertilta
 * eivätkä avattavalta osiolta. Väri neutraaliksi ja nuoli otsikkotekstin
 * viereen kuvakkeen paikalle. */
.md-typeset details:not([class]) {
  border-color: var(--md-default-fg-color--lighter);
}

[dir=ltr] .md-typeset details:not([class]) > summary {
  cursor: pointer;
  background-color: color-mix(in srgb, var(--md-default-fg-color) 7%, transparent);
}

[dir=ltr] .md-typeset details:not([class]) > summary:hover {
  background-color: color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
}

/* Avatun lohkon pohja. Osassa lohkoista sisältö on pelkkiä tekstisolmuja
 * ilman marginaalia, joten väljyys otetaan laatikon paddingista ja viimeisen
 * lapsen marginaali nollataan, ettei elementtisisällöllä tulisi molempia. */
.md-typeset details[open] {
  padding-bottom: 1rem;
}

html .md-typeset details[open] > :last-child {
  margin-bottom: 0;
}

/* Kuvakkeen tilalle teeman oma nuoli, suljettuna alaspäin: nuoli alas =
 * tämän voi avata, ylös = tämän voi sulkea. */
[dir=ltr] .md-typeset details:not([class]) > summary:before {
  background-color: var(--md-default-fg-color--light);
  -webkit-mask-image: var(--md-details-icon);
  mask-image: var(--md-details-icon);
  transform: rotate(90deg);
  transition: transform .25s;
}

.md-typeset details:not([class])[open] > summary:before {
  transform: rotate(-90deg);
}

/* Oikean laidan nuoli pois: sama tieto kahdesti. */
.md-typeset details:not([class]) > summary:after {
  display: none;
}

/* Summary on näppäimistöllä tarkennettava. */
.md-typeset details:not([class]) > summary:focus-visible {
  outline: .1rem solid var(--md-accent-fg-color);
  outline-offset: -.1rem;
}

/* Monirivinen yhteenveto (otsikko ja kappale): teema mitoittaa palkin
 * yhdelle riville, joten reunimmaiset marginaalit pois. Lihavointi jää
 * otsikkoon, koska kokonainen kappale lihavoituna ei erota otsikkoa
 * mitenkään. */
.md-typeset details > summary > :first-child {
  margin-top: 0;
}

.md-typeset details > summary > :last-child {
  margin-bottom: 0;
}

.md-typeset details > summary > p {
  font-weight: 400;
}


/* Varjo on ruudun syvyysvihje; paperilla se on harmaa suti reunuksen
 * ympärillä. */
@media print {
  .md-typeset .admonition,
  .md-typeset details {
    box-shadow: none;
  }
}


/* Oppaiden merkinnät (convert.py: ALERT_KINDS): Kokeile, Ei toimi vielä ja
 * Kysymys. TIM-wikissä nämä olivat pieniä PNG-kuvia (play-nappi, punainen
 * rasti, kysymysmerkki), jotka eivät skaalautuneet eivätkä seuranneet teemaa.
 * Nyt ne ovat omia admonition-tyyppejä, useimmiten pelkkä otsikkorivi. Kokeile
 * ja Ei toimi vielä saavat Materialin success- ja failure-tyyppien värit;
 * Kysymys example-tyypin violetin, koska Materialin question-lime ei erottuisi
 * Kokeile-vihreästä. Kuvakkeet ovat teeman Lucide-sarjasta: play ja circle-x
 * omina muuttujina, koska teemalla ei ole niille muuttujaa (failure on
 * huutomerkki, mutta merkinnän kuva oli rasti); kysymysmerkki teeman omasta.
 * Teema ei tunne tyyppejä, joten kuvakkeen väri annetaan tässä. */
.md-typeset .kokeile  { --adm: #00c853; }
.md-typeset .ei-toimi { --adm: #ff5252; }
.md-typeset .kysymys  { --adm: #7c4dff; }

.md-typeset .kokeile > .admonition-title:before,
.md-typeset .ei-toimi > .admonition-title:before,
.md-typeset .kysymys > .admonition-title:before {
  background-color: var(--adm);
}

.md-typeset .kokeile > .admonition-title:before {
  -webkit-mask-image: var(--jyu-admonition-icon--kokeile);
  mask-image: var(--jyu-admonition-icon--kokeile);
}

.md-typeset .ei-toimi > .admonition-title:before {
  -webkit-mask-image: var(--jyu-admonition-icon--ei-toimi);
  mask-image: var(--jyu-admonition-icon--ei-toimi);
}

.md-typeset .kysymys > .admonition-title:before {
  -webkit-mask-image: var(--md-admonition-icon--question);
  mask-image: var(--md-admonition-icon--question);
}

:root {
  --jyu-admonition-icon--kokeile: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/></svg>');
  --jyu-admonition-icon--ei-toimi: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>');
}