/* Leipätekstin kirjasimen ja koon valikko yläpalkissa.
 * Merkkaus: overrides/partials/header.html, toiminta: assets/js/fontmenu.js,
 * kirjasimet ja koko: typography.css.
 *
 * Painike lainaa hakupalkin ulkoasun (korkeus, pyöristys, tausta), jotta
 * vierekkäiset hallinnat näyttävät samalta sarjalta. Siinä on vain kuvake ja
 * nuoli; nykyiset valinnat näkyvät title-vihjeenä, paneelin kokorivillä ja
 * listan valintamerkkinä. Lista on oma elementtinsä eikä <select>, koska
 * kohtien pitää näkyä omalla kirjasimellaan. */

.jyu-font {
  position: relative;
}

.jyu-font__button {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  height: 1.6rem;
  margin: 0.2rem 0.4rem 0.2rem 0.2rem; /* oikealla väli hakupalkkiin */
  padding: 0 0.35rem 0 0.5rem;
  font: inherit;
  color: var(--md-default-fg-color);
  background-color: var(--md-default-fg-color--lightest);
  border: 0;
  border-radius: 0.4rem;
  cursor: pointer;
}

/* Sama hover-täyttö kuin sivustovalikossa (sitemenu.css). Täyttö vaihtuu
 * kerralla: läpikuultavan taustan häivytys yläpalkin sumennuksen päällä
 * välkkyi osalla näytönohjaimista. Sama haussa (layout.css). */
.jyu-font__button:hover,
.jyu-font__button:focus-visible,
.jyu-font__button[aria-expanded="true"] {
  background-color: var(--jyu-rule);
}

.jyu-font__button:focus-visible {
  outline: 0.1rem solid var(--md-accent-fg-color);
  outline-offset: 0.1rem;
}

/* Pienempi kuin teeman 1,2 rem: lucide/type-kuvakkeen T täyttää koko
 * ruutunsa, joten samassa koossa se näyttäisi naapureitaan isommalta. */
.jyu-font__button svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  fill: none;
  stroke: currentcolor;
}

.jyu-font__chevron {
  display: flex;
  flex: none;
  transition: transform 0.25s; /* kuten teeman valikkonuoli */
}

.jyu-font__chevron svg {
  width: 0.7rem;
  height: 0.7rem;
}

.jyu-font__button[aria-expanded="true"] .jyu-font__chevron {
  transform: rotate(180deg);
}

/* Paneeli painikkeen alle, oikeaan reunaan tasattuna. Varjo kuten teeman
 * hakutuloslaatikossa. */
.jyu-font__panel {
  position: absolute;
  top: 100%;
  right: 0.4rem; /* painikkeen oikea marginaali */
  z-index: 5;
  min-width: 13rem;
  margin: 0.1rem 0 0;
  padding: 0.3rem;
  background-color: var(--md-default-bg-color);
  border-radius: 0.2rem;
  box-shadow: var(--md-shadow-z3);
}

/* Tummassa teemassa z3-varjon hiusviiva on musta eikä erotu taustasta. */
[data-md-color-scheme="slate"] .jyu-font__panel {
  box-shadow: var(--md-shadow-z3), 0 0 0 0.05rem var(--jyu-rule);
}

.jyu-font__panel[hidden] {
  display: none;
}

.jyu-font__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Kokorivi listan yllä. Erotinviiva paneelin reunasta reunaan: negatiivinen
 * marginaali kumoaa paneelin täytteen, ja täyte palauttaa sen. Vasen täyte on
 * paneelin ja kohdan täyte + valintamerkin sarake ja väli (.jyu-font__item),
 * jotta otsikko alkaa samasta kohdasta kuin kirjasinten nimet. */
.jyu-font__size {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: -0.3rem -0.3rem 0.3rem;
  padding: 0.35rem 0.9rem 0.35rem 2.4rem;
  font-size: 0.7rem;
  line-height: 1.4;
  border-bottom: 0.05rem solid var(--jyu-rule);
}

.jyu-font__size-label {
  flex: 1;
  margin-right: 0.5rem;
}

/* −, nykyinen koko ja +. Napit kirjasinpainikkeen korkuisia, jotta ne ovat
 * puhelimessakin kunnon kosketuskohteita; luku on tekstinappi, joka palauttaa
 * oletuksen. */
.jyu-font__step,
.jyu-font__reset {
  height: 1.6rem;
  padding: 0;
  font: inherit;
  color: var(--md-default-fg-color);
  border: 0;
  border-radius: 0.3rem;
  cursor: pointer;
}

.jyu-font__step {
  display: grid;
  place-items: center;
  width: 1.6rem;
  background-color: var(--md-default-fg-color--lightest);
}

.jyu-font__step svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: currentcolor;
}

.jyu-font__reset {
  min-width: 2.6rem;
  font-variant-numeric: tabular-nums;
  background-color: transparent;
}

.jyu-font__step:hover,
.jyu-font__step:focus-visible {
  background-color: var(--jyu-rule);
}

.jyu-font__reset:hover,
.jyu-font__reset:focus-visible {
  background-color: var(--md-default-fg-color--lightest);
}

.jyu-font__step:focus-visible,
.jyu-font__reset:focus-visible {
  outline: 0.1rem solid var(--md-accent-fg-color);
  outline-offset: 0.05rem;
}

/* Ääripäässä ja oletuskoossa nappi ei tee mitään. aria-disabled eikä
 * disabled, jotta kohdistus ei katoa napista kesken näppäilyn. */
.jyu-font__step[aria-disabled="true"] {
  cursor: default;
  opacity: 0.35;
  background-color: var(--md-default-fg-color--lightest);
}

.jyu-font__reset[aria-disabled="true"] {
  cursor: default;
  color: var(--md-default-fg-color--light);
  background-color: transparent;
}

.jyu-font__item {
  display: grid;
  grid-template-columns: 1rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.15rem;
  font-size: 0.7rem;
  line-height: 1.4;
  cursor: pointer;
}

/* Korostus seuraa kohdistusta, jota sekä nuolet että hiiri siirtävät
 * (fontmenu.js). Ei :focus-visible, koska hiirellä saatu kohdistus ei täytä sitä. */
.jyu-font__item:focus {
  background-color: var(--md-default-fg-color--lightest);
  outline: none;
}

/* Valintamerkki varaa paikkansa aina, jotta nimet pysyvät samassa sarakkeessa. */
.jyu-font__item svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--md-primary-fg-color);
  visibility: hidden;
}

.jyu-font__item[aria-selected="true"] svg {
  visibility: visible;
}

/* Jokainen nimi omalla kirjasimellaan. Tunnukset samat kuin header.html:n
 * data-font ja typography.css:n body[data-jyu-font]. */
.jyu-font__item[data-font=""] .jyu-font__name {
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
}

.jyu-font__item[data-font="atkinson"] .jyu-font__name {
  font-family: "Atkinson Hyperlegible Next", Helvetica, Arial, sans-serif;
}

.jyu-font__item[data-font="literata"] .jyu-font__name {
  font-family: "Literata", Georgia, serif;
}

.jyu-font__kind {
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  color: var(--md-default-fg-color--light);
}