@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;

.editor-avatar-group {
	display: flex;
	align-items: center;

	// Overlap subsequent avatars.
	> .editor-avatar + .editor-avatar {
		margin-inline-start: -$grid-unit-10;
	}

	// Stack earlier avatars on top of later ones so the overlap
	// is visually correct, and elevate on hover for badge expansion.
	> .editor-avatar {
		position: relative;

		@for $i from 1 through 10 {
			&:nth-child(#{$i}) {
				z-index: #{11 - $i};
			}
		}
	}
}

.editor-avatar-group__overflow {
	margin-inline-start: $grid-unit-05;
	margin-inline-end: $grid-unit-05;
	font-size: $font-size-small;
	line-height: $font-line-height-small;
	color: $gray-900;
	white-space: nowrap;
}