.Typing {
  display: flex;
  align-items: center;
  height: 22.5px;
}

.Typing-text {
  margin-right: 9px;
  font-size: var(--font-size-body);
}

@frame-time: 0.4s;

.Typing-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-sm);
  animation: typing-dot (@frame-time * 4) ease-in-out infinite;
  background: var(--color-line-2);

  & + & {
    margin-left: 4px;
  }
  &[data-i="1"] {
    animation-delay: 0.2s;
  }
  &[data-i="2"] {
    animation-delay: 0.3s;
  }
}

@keyframes typing-dot {
  0%, 40%, 100% {
    background: var(--color-line-2);
  }
  20% {
    background: var(--color-text-3);
    transform: scale(1.2);
  }
}