:root {
	--indieblocks-avatar-size: 36px;
}

.wp-block-indieblocks-facepile-content .indieblocks-avatar-size-1 {
	--indieblocks-avatar-size: 24px;
}

.wp-block-indieblocks-facepile-content .indieblocks-avatar-size-2 {
	--indieblocks-avatar-size: 36px;
}

.wp-block-indieblocks-facepile-content .indieblocks-avatar-size-3 {
	--indieblocks-avatar-size: 48px;
}

.wp-block-indieblocks-facepile-content .indieblocks-avatar-size-4 {
	--indieblocks-avatar-size: 60px;
}

.wp-block-indieblocks-facepile-content ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	padding-inline-end: var(--indieblocks-avatar-size);
}

.wp-block-indieblocks-facepile-content li {
	display: inline-block;
	margin-inline-end: calc(-0.33 * var(--indieblocks-avatar-size));
	position: relative;
}

.wp-block-indieblocks-facepile-content li:not(:last-child):hover {
	margin-inline-end: calc(-0.05 * var(--indieblocks-avatar-size));
}

.wp-block-indieblocks-facepile-content a {
	display: block;
	position: relative;
}

.wp-block-indieblocks-facepile-content .avatar {
	display: block;
	width: var(--indieblocks-avatar-size);
	height: var(--indieblocks-avatar-size);
	border-radius: 50%;
}

.wp-block-indieblocks-facepile-content .icon {
	display: block;
	width: calc(0.5 * var(--indieblocks-avatar-size));
	height: calc(0.5 * var(--indieblocks-avatar-size));
	position: absolute;
	right: -3px;
	bottom: -3px;
	border-radius: 50%;
}

.wp-block-indieblocks-facepile-content .indieblocks-count .icon {
	display: inline;
	width: 1.1em;
	height: 1.1em;
	position: relative;
	top: 0.2em;
	right: initial;
	bottom: initial;
}