/* Featured sites */
.facepile {
	margin-top: 2em;
	margin-bottom: 3em;
	line-height: 2;
	padding: 0 0 0 25px;
}
.facepile > a {
	display: inline-block;
	margin-left: -25px;
}
.supporters-silver .facepile {
	text-align: center;
	text-wrap: balance; /* Not supported with display: inline-block on FF yet */
}
.supporters-silver .facepile > a ~ a {
	margin-left: 0;
}
.supporters-silver .facepile .avatar {
	border-radius: .25em;
	border-width: 0;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
}

.facepile > a:focus,
.facepile > a:hover {
	opacity: 1;
	position: relative;
	z-index: 1;
}
.facepile .avatar {
	width: 24px;
	height: 24px;
	width: calc(24px + 4vw);
	height: calc(24px + 4vw);
	max-width: 50px;
	max-height: 50px;
	margin-bottom: 6px;
	color: #fff;
	border: 2px solid;
	transition: border 0.3s;
	object-fit: contain;
}
@media (prefers-color-scheme: dark) {
	.facepile .avatar {
		color: #222;
	}
}
.facepile-supporters .avatar {
	width: calc(24px + 2vw);
	height: calc(24px + 2vw);
}
.facepile > a:after {
	content: "";
	position: absolute;
	border-radius: 50%;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
}
.facepile > a:focus:after,
.facepile > a:hover:after {
	left: -24px; /* Right - 4px */
	right: -20px;
	top: -24px; /* Right - 4px */
	bottom: -20px;
	opacity: 0.6;
	background-color: currentColor;
	background-image: linear-gradient(
		238deg,
		#ff0000,
		#ff8000,
		#ffff00,
		#80ff00,
		#00ff00,
		#00ff80,
		#00ffff,
		#0080ff,
		#0000ff,
		#8000ff,
		#ff0080
	);
	background-size: 1200% 1200%;
	background-position: 0 80%;
}
.facepile > a:nth-child(11n + 1):focus:after,
.facepile > a:nth-child(11n + 1):hover:after {
	background-position: 0% 80%;
}
.facepile > a:nth-child(11n + 2):focus:after,
.facepile > a:nth-child(11n + 2):hover:after {
	background-position: 9% 80%;
}
.facepile > a:nth-child(11n + 3):focus:after,
.facepile > a:nth-child(11n + 3):hover:after {
	background-position: 18% 80%;
}
.facepile > a:nth-child(11n + 4):focus:after,
.facepile > a:nth-child(11n + 4):hover:after {
	background-position: 27% 80%;
}
.facepile > a:nth-child(11n + 5):focus:after,
.facepile > a:nth-child(11n + 5):hover:after {
	background-position: 36% 80%;
}
.facepile > a:nth-child(11n + 6):focus:after,
.facepile > a:nth-child(11n + 6):hover:after {
	background-position: 45% 80%;
}
.facepile > a:nth-child(11n + 7):focus:after,
.facepile > a:nth-child(11n + 7):hover:after {
	background-position: 54% 80%;
}
.facepile > a:nth-child(11n + 8):focus:after,
.facepile > a:nth-child(11n + 8):hover:after {
	background-position: 63% 80%;
}
.facepile > a:nth-child(11n + 9):focus:after,
.facepile > a:nth-child(11n + 9):hover:after {
	background-position: 72% 80%;
}
.facepile > a:nth-child(11n + 10):focus:after,
.facepile > a:nth-child(11n + 10):hover:after {
	background-position: 81% 80%;
}
.facepile > a:nth-child(11n + 11):focus:after,
.facepile > a:nth-child(11n + 11):hover:after {
	background-position: 90% 80%;
}

.facepile-fake .avatar {
	background-color: #eee;
}

/* Filter out gold sponsors when the giant logos are adjacent (in the footer, everywhere but the home page) */
.facepile-supporters [data-supporters-tier="gold-sponsor"],
.facepile-supporters [data-supporters-tier="silver-sponsor"] {
	display: none;
}
[show-gold-sponsors] .facepile-supporters [data-supporters-tier="gold-sponsor"],
[show-silver-sponsors] .facepile-supporters [data-supporters-tier="silver-sponsor"] {
	display: inline-block;
}

.facepile > a:has(img.avatar:not([src])) {
	display: none;
}
