.qkb-bot-ui--animate {
  // FadeUp
  .qkb-fadeUp-enter-active,
  .qkb-fadeUp-leave-active {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity 0.15s linear, transform 0.2s ease-out;
  }

  .qkb-fadeUp-enter,
  .qkb-fadeUp-leave-to {
    transform: translate(0, 20px);
    opacity: 0;
  }

  // ScaleUp
  .qkb-scaleUp-enter-active,
  .qkb-scaleUp-leave-active {
    opacity: 1;
    transform: scale(1, 1);
    transition: opacity 0.1s linear, transform 0.2s ease-out;
  }

  .qkb-scaleUp-enter,
  .qkb-scaleUp-leave-to {
    transform: scale(0, 0);
    opacity: 0;
  }
}

// Typing indicator
@keyframes qkbJump {
  from {
    transform: translateY(2px);
  }
  to {
    transform: translateY(-1px);
  }
}

$typing-duration: 0.35s;

.qkb-msg-bubble__typing-indicator {
  span,
  &::before,
  &::after {
    transform: translateY(2px);
    animation: qkbJump ease $typing-duration infinite alternate;
  }

  span {
    animation-delay: calc($typing-duration / 2);
  }

  &::after {
    animation-delay: $typing-duration;
  }
}