.str-chat__typing-indicator {
  display: flex;
  visibility: hidden;
  align-items: center;
  &--typing {
    visibility: visible;
  }
  &__avatars {
    display: flex;
    .str-chat__avatar {
      border: 2px solid white;
      margin-right: -14px;
      &:last-of-type {
        margin-right: 14px;
      }
    }
  }
  &__dots {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 7px;
    border-radius: $border-radius $border-radius $border-radius 2px;
  }
  &__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 3px;
    background: $secondary-color;
    animation: wave 1.1s linear infinite;

    &:nth-child(2) {
      animation-delay: -0.9s;
      opacity: 0.5;
    }

    &:nth-child(3) {
      animation-delay: -0.8s;
      opacity: 0.2;
    }
  }
}

.dark.str-chat {
  .str-chat__typing-indicator {
    &__avatars {
      .str-chat__avatar {
        border-color: #282a2d;
      }
    }
    &__dots {
      background: rgba(white, 0.05);
    }
  }
}

@keyframes wave {
  0%,
  60%,
  100% {
    transform: initial;
  }

  30% {
    transform: translateY(-8px);
  }
}