@use "@siteground/styleguide/lib/styles/base/styleguide" as *;

.ai-typing-box.ai-typing-box {
  width: 60px;
  flex-shrink: 0;
  padding: 10px 5px;
  margin-top: 8px;
  border-radius: 4px;
  font-size: 25px;
  line-height: 0;
}

.ai-typing-box {
  span {
    display: inline-block;
    margin: 0 2px;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background-color: var(--typography-dark);
  }
  &__first-dot {
    animation: typing 1s infinite ease-in-out 0.2s;
  }

  &__second-dot {
    animation: typing 1s infinite ease-in-out 0.4s;
  }

  &__third-dot {
    animation: typing 1s infinite ease-in-out 0.6s;
  }
}

/************************************************************
Themes
***********************************************************/
.sg-theme-hcb,
.sg-theme-hcl {
  .ai-typing-box,
  .ai-chat-message {
    background-color: transparent;
  }

  .ai-chat-message {
    border: 1px solid var(--border-color-outer);
    border-radius: var(--radius-x-large);
  }
}

/************************************************************
  Animation
  ***********************************************************/

@keyframes typing {
  0% {
    transform: translateY(0);
    opacity: 0.2;
  }
  50% {
    transform: translateY(-5px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.2;
  }
}