/* Contributor avatars for Zensical's `modern` theme variant.
 *
 * WHY THIS FILE EXISTS
 * Zensical's `classic` stylesheet carries the full `.md-author` rule set that
 * Material for MkDocs shipped — circular crop, 1.6rem size, grayscale-to-color
 * on hover, scale transform. The `modern` stylesheet has the `.md-source-file*`
 * rules but NONE of the `.md-author` ones, so avatars render as raw, oversized
 * squares. This restores them.
 *
 * Rules below are ported from
 *   zensical/templates/assets/stylesheets/classic/main.*.min.css
 * plus a tooltip, since `title` alone only yields the slow native browser one.
 *
 * Remove this file if a future Zensical release adds `.md-author` to `modern`.
 */

/* ---- circular avatars, ported verbatim from `classic` ---- */

.md-typeset .md-author {
  border-radius: 100%;
  display: block;
  flex-shrink: 0;
  height: 1.6rem;
  width: 1.6rem;
  overflow: hidden;
  position: relative;
  transform: scale(1);
  transition: color 125ms, transform 125ms;
}

.md-typeset .md-author img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  object-fit: cover;          /* non-square source images crop, not squash */
}

/* Desaturated at rest so the footer stays quiet; full colour on hover. */
.md-typeset a.md-author img {
  filter: grayscale(100%) opacity(75%);
  transition: filter 125ms;
}

.md-typeset a.md-author:focus img,
.md-typeset a.md-author:hover img {
  filter: grayscale(0);
}

.md-typeset a.md-author:focus,
.md-typeset a.md-author:hover {
  transform: scale(1.1);
  z-index: 2;
}

/* The "+N" chip when a page has more than 4 contributors. */
.md-typeset .md-author--more {
  background: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--lighter);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.6rem;
  text-align: center;
}

/* Overlap the avatars slightly, as Material did, and give the hovered one
   room to grow without nudging its neighbours. */
.md-source-file__fact nav {
  display: inline-flex;
  align-items: center;
}

.md-source-file__fact nav .md-author + .md-author {
  margin-left: -0.25rem;
}

/* ---- hover tooltip showing @username ---- */
/* The partial emits `data-author` instead of `title`, so the native browser
   tooltip never fires and this is the only one shown. */

.md-typeset a.md-author[data-author]::after {
  content: attr(data-author);
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  padding: 0.2rem 0.4rem;
  border-radius: 0.1rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  box-shadow: var(--md-shadow-z2, 0 0.2rem 0.5rem rgba(0, 0, 0, 0.15));
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 125ms, transform 125ms;
  z-index: 3;
}

.md-typeset a.md-author[data-author]:focus::after,
.md-typeset a.md-author[data-author]:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* `overflow: hidden` gives the circular crop but would clip the tooltip, so
   the crop moves to the image and the anchor is allowed to overflow. */
.md-typeset a.md-author[data-author] {
  overflow: visible;
}