/* Koodilohkon nappirivi: ajonappi ja silmä kohotettuina laattoina.
 * Teema piirtää napit paljaina kuvakkeina, jotka erottuvat vasta hoverilla;
 * kopiointinapille se riittää, mutta kirjan omia toimintoja lukija ei osaa
 * etsiä hoverin takaa, eikä kosketusnäytöllä hoveria ole. Tiedosto on oma,
 * koska se koskee koko riviä: playground.css ja hidelines.css antavat vain
 * kuvakkeen, tämä napin. */

:root {
  /* Pinta on molemmissa teemoissa lohkoa vaaleampi. Varjo on tummassa
   * musta, koska tummalla pinnalla se ei näy vaaleana. */
  --jyu-code-button-bg: #fff;
  --jyu-code-button-shadow: 0 0.05rem 0.15rem #0000001f;
  --jyu-code-button-shadow-hover: 0 0.15rem 0.35rem #00000029;
}

[data-md-color-scheme="slate"] {
  --jyu-code-button-bg: hsla(var(--md-hue), 20%, 26%, 1);
  --jyu-code-button-shadow: 0 0.05rem 0.15rem #00000066;
  --jyu-code-button-shadow-hover: 0 0.15rem 0.35rem #00000080;
}

/* Nappirivin oma tausta pois: nappien pinnat erottavat ne koodista jo, ja
 * kaksi sisäkkäistä laatikkoa on yksi liikaa. */
.md-code__nav {
  background-color: transparent;
}

/* Teeman 1.5em:ssä kuvake liimautuisi reunukseen; 1.75em antaa väljyyttä ja
 * kasvattaa kosketuskohdetta. */
.md-code__button {
  width: 1.75em;
  height: 1.75em;
  color: var(--md-default-fg-color--light);
  background-color: var(--jyu-code-button-bg);
  border: 0.05rem solid var(--jyu-rule);
  border-radius: 0.15rem;
  box-shadow: var(--jyu-code-button-shadow);

  /* Nosto ja painallus nopeammin kuin värit: napsahdus, ei liuku. */
  transition:
    color 0.25s,
    background-color 0.25s,
    border-color 0.25s,
    box-shadow 0.25s,
    transform 0.1s;
}

/* :not(:disabled), koska selain antaa :hoverin myös disabled-napille: ajon
 * aikana himmennetty nappi (playground.css) nousisi muuten kuin painettava. */
.md-code__button:not(:disabled):hover,
.md-code__button:not(:disabled).focus-visible {
  color: var(--md-accent-fg-color);
  background-color: color-mix(in srgb, var(--md-accent-fg-color) 8%, var(--jyu-code-button-bg));
  border-color: var(--md-accent-fg-color);
  box-shadow: var(--jyu-code-button-shadow-hover);
  transform: translateY(-0.05rem);
}

/* Painallus lepotason läpi hieman alle: siitä tulee napsahdus. */
.md-code__button:not(:disabled):active {
  transform: translateY(0.05rem);
  box-shadow: none;
  transition-duration: 0.05s;
}

/* Silmän päällä-tila painettuna pohjaan; muuten ainoa merkki tilasta olisi
 * kuvakkeen vaihtuminen. */
.md-code__button[aria-pressed="true"] {
  color: var(--md-accent-fg-color);
  background-color: color-mix(in srgb, var(--md-accent-fg-color) 12%, var(--jyu-code-button-bg));
  border-color: var(--md-accent-fg-color);
  box-shadow: none;
}

/* Liikkumattomuutta pyytäneelle vain värit. */
@media (prefers-reduced-motion: reduce) {
  .md-code__button {
    transition: color 0.25s, background-color 0.25s, border-color 0.25s;
  }

  .md-code__button:not(:disabled):hover,
  .md-code__button:not(:disabled).focus-visible,
  .md-code__button:not(:disabled):active {
    transform: none;
  }
}