/* ==========================================================
   First & Last avatar
   Sizes come from the ACP through --fla-main / --fla-small.
   A style can override the ring colour with --fla-ring.
   ========================================================== */

.fla-avatars {
	--fla-main: 32px;
	--fla-small: 18px;
	float: left;
	position: relative;
	width: var(--fla-main);
	height: var(--fla-main);
	margin: 2px 8px 0 0;
	line-height: 0;
}

.fla-avatars a,
.fla-avatars .fla-nolink {
	display: block;
	border: 0;
	text-decoration: none;
}

/* Images and initials share the same circle */
.fla-avatars img,
.fla-avatars .fla-initial {
	display: block;
	box-sizing: border-box;
	border-radius: 50%;
	object-fit: cover;
	max-width: none;
	transition: transform .15s ease;
}

.fla-main img,
.fla-main .fla-initial {
	width: var(--fla-main);
	height: var(--fla-main);
}

/* Last poster, overlapping the bottom-right corner */
.fla-last {
	position: absolute;
	right: -3px;
	bottom: -3px;
}

.fla-last img,
.fla-last .fla-initial {
	width: var(--fla-small);
	height: var(--fla-small);
	box-shadow: 0 0 0 2px var(--fla-ring, #fff);
}

/* Letter avatar */
.fla-initial {
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-weight: 700;
	font-size: calc(var(--fla-main) * .46);
	line-height: 1;
	user-select: none;
}

.fla-last .fla-initial {
	font-size: calc(var(--fla-small) * .55);
}

a.fla-link:hover img,
a.fla-link:hover .fla-initial,
a.fla-link:focus-visible img,
a.fla-link:focus-visible .fla-initial {
	transform: scale(1.08);
}

a.fla-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 50%;
}

/* Keep the last post column on one line next to the avatars */
dd.lastpost {
	white-space: nowrap;
}

/* The small "Last post by…" line shown on phones has no room for the avatars */
.responsive-show .fla-avatars {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.fla-avatars img,
	.fla-avatars .fla-initial {
		transition: none;
	}
}