.seolabs-avatar-stack {
	--sas-size: 56px;
	--sas-gap: -12px;
	--sas-border-width: 3px;
	--sas-border-color: #fff;
	--sas-radius: 50%;
	--sas-duration: 500ms;
	--sas-delay-step: 80ms;
	--sas-hover-lift: 2px;

	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;
}

.seolabs-avatar-stack__item {
	width: var(--sas-size);
	height: var(--sas-size);
	min-width: var(--sas-size);
	object-fit: cover;
	border-radius: var(--sas-radius);
	border: var(--sas-border-width) solid var(--sas-border-color);
	margin-left: var(--sas-gap);
	position: relative;
	z-index: 1;
	transition:
		transform 0.25s ease,
		filter 0.25s ease,
		opacity var(--sas-duration) ease;
	will-change: transform, opacity;
	/*background: #f3f3f3;*/
}

.seolabs-avatar-stack__item:first-child {
	margin-left: 0;
}

.seolabs-avatar-stack__item:hover {
	transform: translateY(calc(-1 * var(--sas-hover-lift)));
	z-index: 99;
}

.seolabs-avatar-stack__item:nth-child(1) { z-index: 1; }
.seolabs-avatar-stack__item:nth-child(2) { z-index: 2; }
.seolabs-avatar-stack__item:nth-child(3) { z-index: 3; }
.seolabs-avatar-stack__item:nth-child(4) { z-index: 4; }
.seolabs-avatar-stack__item:nth-child(5) { z-index: 5; }
.seolabs-avatar-stack__item:nth-child(6) { z-index: 6; }
.seolabs-avatar-stack__item:nth-child(7) { z-index: 7; }
.seolabs-avatar-stack__item:nth-child(8) { z-index: 8; }
.seolabs-avatar-stack__item:nth-child(9) { z-index: 9; }
.seolabs-avatar-stack__item:nth-child(10) { z-index: 10; }
.seolabs-avatar-stack__item:nth-child(11) { z-index: 11; }
.seolabs-avatar-stack__item:nth-child(12) { z-index: 12; }
.seolabs-avatar-stack__item:nth-child(13) { z-index: 13; }
.seolabs-avatar-stack__item:nth-child(14) { z-index: 14; }
.seolabs-avatar-stack__item:nth-child(15) { z-index: 15; }
.seolabs-avatar-stack__item:nth-child(16) { z-index: 16; }
.seolabs-avatar-stack__item:nth-child(17) { z-index: 17; }
.seolabs-avatar-stack__item:nth-child(18) { z-index: 18; }
.seolabs-avatar-stack__item:nth-child(19) { z-index: 19; }
.seolabs-avatar-stack__item:nth-child(20) { z-index: 20; }

.seolabs-avatar-stack[data-grayscale="yes"] .seolabs-avatar-stack__item {
	filter: grayscale(1);
}

.seolabs-avatar-stack[data-grayscale="yes"][data-hover-color="yes"] .seolabs-avatar-stack__item:hover {
	filter: grayscale(0);
}

.seolabs-avatar-stack[data-effect="fade"] .seolabs-avatar-stack__item,
.seolabs-avatar-stack[data-effect="slide-up"] .seolabs-avatar-stack__item,
.seolabs-avatar-stack[data-effect="zoom-in"] .seolabs-avatar-stack__item {
	opacity: 0;
}

.seolabs-avatar-stack[data-effect="fade"] .seolabs-avatar-stack__item.is-visible {
	opacity: 1;
}

.seolabs-avatar-stack[data-effect="slide-up"] .seolabs-avatar-stack__item {
	transform: translateY(16px);
}

.seolabs-avatar-stack[data-effect="slide-up"] .seolabs-avatar-stack__item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.seolabs-avatar-stack[data-effect="zoom-in"] .seolabs-avatar-stack__item {
	transform: scale(0.85);
}

.seolabs-avatar-stack[data-effect="zoom-in"] .seolabs-avatar-stack__item.is-visible {
	opacity: 1;
	transform: scale(1);
}

.seolabs-avatar-stack[data-effect="none"] .seolabs-avatar-stack__item,
.seolabs-avatar-stack.no-observer .seolabs-avatar-stack__item {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.seolabs-avatar-stack__item {
		transition: none !important;
	}

	.seolabs-avatar-stack .seolabs-avatar-stack__item {
		opacity: 1 !important;
		transform: none !important;
	}
}
