/* Solid brand colours only – no gradients, no tints (docs/konventionen/styleguide.md). The ring separates an avatar from the
   surface behind it and from its neighbour in a stack; set --avatar-ring to that surface. */
.avatar {
  --avatar-ring: var(--surface-card);

  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 var(--avatar-ring-width, 2px) var(--avatar-ring);
  background: var(--avatar-bg);
  color: var(--avatar-text);
  font-family: var(--font-body);
  font-size: var(--avatar-font-size);
  font-weight: var(--fw-body-bold);
  line-height: 1;
  letter-spacing: 0.02em;
  user-select: none;
}

.avatar--xxs { --avatar-size: 1.25rem; --avatar-font-size: 0.5625rem; --avatar-ring-width: 1.5px; }
.avatar--xs { --avatar-size: 1.5rem;  --avatar-font-size: 0.625rem; --avatar-ring-width: 1.5px; }
.avatar--sm { --avatar-size: 2rem;    --avatar-font-size: var(--fs-body-xs); }
.avatar--md { --avatar-size: 2.5rem;  --avatar-font-size: var(--fs-body-s); }
.avatar--lg { --avatar-size: 4rem;    --avatar-font-size: var(--fs-body); }

.avatar--tanne      { --avatar-bg: var(--avatar-tanne-bg);      --avatar-text: var(--avatar-tanne-text); }
.avatar--tanne_dark { --avatar-bg: var(--avatar-tanne-dark-bg); --avatar-text: var(--avatar-tanne-dark-text); }
.avatar--klee       { --avatar-bg: var(--avatar-klee-bg);       --avatar-text: var(--avatar-klee-text); }
.avatar--klee_light { --avatar-bg: var(--avatar-klee-light-bg); --avatar-text: var(--avatar-klee-light-text); }
.avatar--grashalm   { --avatar-bg: var(--avatar-grashalm-bg);   --avatar-text: var(--avatar-grashalm-text); }
.avatar--sand       { --avatar-bg: var(--avatar-sand-bg);       --avatar-text: var(--avatar-sand-text); }

/* Away: grey instead of the own colour, and a dashed ring, so it shows without colour too. */
.avatar--away {
  --avatar-bg: var(--avatar-away-bg);
  --avatar-text: var(--avatar-away-text);

  outline: var(--border-width) dashed var(--avatar-away-text);
  outline-offset: -1px;
}