/* avatar.css - the letter avatar (.tav) shown when a member has no picture or the picture file is missing.
 * Size follows --tav-size (30px in comments and the community list, 60px in the sidebar, matching the images
 * those skins style). Colour is hsl() from --tav-h, which avatar.js sets per nickname; until then it is grey.
 * html[data-theme="dark"] switches to the night palette. */
.tav {
  --tav-size: 30px;
  --tav-s: 0%;
  --tav-l: 62%;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  width: var(--tav-size);
  height: var(--tav-size);
  line-height: var(--tav-size);
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
  font-size: calc(var(--tav-size) * .46);
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  background-color: hsl(var(--tav-h, 0), var(--tav-s), var(--tav-l));
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 58%);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .14);
  user-select: none;
}
.tav.is-ready {
  --tav-s: 52%;
  --tav-l: 46%;
}

/* comments and the community list: a little air between the disc (letter or picture) and the nickname */
.media-user:not(#ChangeImage) .tav,
.media-user:not(#ChangeImage) img.img-circle {
  margin-right: 6px;
}

/* sidebar: the skin positions its 60px picture with these offsets, so the swapped-in avatar takes the same ones;
 * the .media-nouser wrapper already carries them for the no-picture case */
.media-nouser .tav {
  --tav-size: 60px;
  cursor: pointer;
}
.media-user#ChangeImage .tav {
  --tav-size: 60px;
  margin-left: 20px;
  margin-top: 18px;
  float: left;
  cursor: pointer;
}

html[data-theme="dark"] .tav {
  --tav-l: 36%;
  color: #f2f2f2;
  text-shadow: none;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 58%);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .tav.is-ready {
  --tav-s: 40%;
  --tav-l: 40%;
}