/* Group directory member avatar stack. */

/* group members wrapper */
#buddypress #groups-list .group-members-wrap {
	margin: 0;
}

/* group members */
#buddypress #groups-list .group-footer-wrap .bs-group-members {
	flex-direction: row;
	padding: 0 0 0 8px;
	margin: 0;
}

/* group member */
#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member {
	max-width: fit-content;
	margin-right: 0;
	margin-left: -8px;
}

/* group member -- order and index */
#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member:nth-child(1) {
	z-index: 5;
}

#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member:nth-child(2) {
	z-index: 4;
}

#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member:nth-child(3) {
	z-index: 3;
}

#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member:nth-child(4) {
	z-index: 2;
}

#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member:nth-child(5) {
	z-index: 1;
}

#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member:nth-child(6) {
	z-index: 0;
}

/* group member link */
#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member > a {
	display: flex;
	color: var(--text-color-secondary);
}

/* group member link hover */
#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member > a:hover {
	display: flex;
	color: var(--text-color-primary);
}

/* group member link after */
#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member > a::after {
	content: "";
	position: absolute;
	inset: 2px;
	z-index: 10;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	border-radius: var(--border-radius-circle);
	background-color: rgba(0, 0, 0, 0);
}

/* group member link after on focus visible + hover */
#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member:focus-visible > a::after,
#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member:hover > a::after {
	background-color: rgba(0, 0, 0, 0.09);
}

/* group member link after on active */
#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member:active > a::after {
	background-color: rgba(0, 0, 0, 0.18);
}

/* group member image */
#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member > a > img {
	width: 32px;
	max-width: 32px;
	height: 32px;
	border: 2px solid rgb(255, 255, 255);
	margin: 0;
	background-color: rgba(0, 0, 0, 0);
}

/* group member link */
#buddypress #groups-list .group-footer-wrap .bs-group-members .bs-group-member > a > span {
	width: 32px;
	height: 32px;
	border: 2px solid rgb(255, 255, 255);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	border-radius: var(--border-radius-circle);
	background-color: rgba(0, 0, 0, 0.06);
	font-size: var(--x-small-font-size);
	line-height: var(--x-small-line-height);
	color: inherit;
}

/* Keep the stack aligned in group list rows. */
#buddypress #groups-list:not(.grid) .group-footer-wrap .bs-group-members {
	margin: 0;
}