@keyframes typing-dot {
	0%,
	55%,
	100% {
		opacity: 0.5;
		transform: translateY(0);
	}

	18% {
		opacity: 0.9;
		transform: translateY(calc(var(--dot-lift) * -1));
	}
}

.typing-dots-dot {
	block-size: var(--dot-size);
	display: inline-block;
	inline-size: var(--dot-size);
	transform-origin: center bottom;
	vertical-align: baseline;
	animation: typing-dot 1.05s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.typing-dots-dot + .typing-dots-dot {
	margin-inline-start: var(--dot-gap);
}

.typing-dots-dot:nth-child(2) {
	animation-delay: 120ms;
}

.typing-dots-dot:nth-child(3) {
	animation-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
	.typing-dots-dot {
		animation: none;
		opacity: 0.75;
		transform: none;
	}
}