/* CLARA-logotypen — delad resurs.
 *
 * Kopiera hela mappen `logga/` in i projektet och länka den här filen.
 * Att det är samma fil överallt är hela poängen: ändras måttet här
 * ändras det i alla verktyg. Skriv inte över värdena lokalt — ändra
 * här och kopiera om.
 *
 * Se LÄSMIG.md för hur den används och varför höjden ser ut som den gör.
 */

:root {
  /* Bokstävernas höjd på skärmen. SVG:en är beskuren tätt runt
     ordmärket, så det här är exakt vad man ser — inte en ruta med luft
     omkring. 13 motsvarar den storlek logotypen haft i CLARA sedan
     tidigare. */
  --clara-logga-hojd: 13px;

  /* Höjden på bandet som ordmärket centreras i, när det står bredvid
     något högre. Sätt den till grannens höjd — 44 för en primärknapp,
     38 för en flik — så hamnar logotypen på samma mittlinje. */
  --clara-logga-band: 44px;
}

/* Själva ordmärket. Sätts på <img>. */
.clara-logga {
  display: block;
  height: var(--clara-logga-hojd);
  width: auto;
}

/* Wrapper när något högre står bredvid, t.ex. en knapp eller en meny.
   Utan den hamnar ordmärket på sin egen mittlinje och ser snett ut.
   Behövs inte när logotypen står ensam. */
.clara-logga-rad {
  display: flex;
  align-items: center;
  min-height: var(--clara-logga-band);
}