@use "../../globals.scss" as *;

/* three animated dots */
.typingDots {
	display: inline-flex;
	gap: 3px;
}

.typingDots span {
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: #9ca3af; // gray-400
	animation: typingBlink 1s infinite ease-in-out;
}

.typingDots span:nth-child(2) {
	animation-delay: 0.15s;
}

.typingDots span:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes typingBlink {

	0%,
	80%,
	100% {
		opacity: 0.2;
		transform: translateY(0);
	}

	40% {
		opacity: 1;
		transform: translateY(-2px);
	}
}