/* iso.css: der Umschalter zwischen flacher Karte und den drei
   Kloetzchen-Anstrichen.

   Eigene Datei, damit style.css unberuehrt bleibt. Es werden nur die
   Variablen benutzt, die dort schon fuer alle drei Ansichten gesetzt
   sind (--glas, --glasrand, --cyan, --txt, --mut). Dadurch faerbt der
   Umschalter automatisch mit, wenn man von Neon auf Pergament oder
   Nacht wechselt, ohne eine einzige feste Farbe. */

.ansichten{
  display:flex; align-items:center; gap:2px;
  padding:2px; border-radius:11px;
  background:color-mix(in srgb, var(--glasrand) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--glasrand) 55%, transparent);
}

.ansichten button{
  font:inherit; font-size:11px; line-height:1;
  color:var(--mut); background:transparent; border:0; cursor:pointer;
  padding:5px 9px; border-radius:9px; white-space:nowrap;
  display:flex; align-items:center; gap:5px;
  transition:background .16s, color .16s;
}
.ansichten button:hover{ color:var(--txt); background:color-mix(in srgb, var(--cyan) 14%, transparent); }
.ansichten button:active{ transform:scale(.95); }

/* Der aktive Anstrich leuchtet, damit man ohne Lesen sieht, wo man ist. */
.ansichten button.an{
  color:var(--txt);
  background:linear-gradient(180deg, var(--glanz), transparent 65%),
             color-mix(in srgb, var(--cyan) 26%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cyan) 55%, transparent),
             0 0 14px color-mix(in srgb, var(--cyan) 30%, transparent);
}

/* Das Zeichen traegt die Bedeutung, der Name erklaert sie. Auf schmalen
   Schirmen faellt der Name weg, damit die Leiste nicht umbricht. */
.ansichten button i{ font-style:normal; font-size:13px; }
.ansichten button em{ font-style:normal; letter-spacing:.4px; }

@media (max-width:1080px){
  .ansichten button em{ display:none; }
  .ansichten button{ padding:5px 7px; }
}

/* In der Nacht-Ansicht gibt es kein Cyan, dort traegt der Rahmen. */
body[data-theme="nacht"] .ansichten button.an{
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
}