.typing-status {
  display: flex;
  align-items: baseline;

  .sender-name {
    &::after {
      content: '\00a0';
      color: var(--color-text-secondary);
    }
  }

  .ellipsis {
    display: flex;
    width: 1rem;
    overflow: hidden;

    &::after {
      content: '...';
      animation: typing-animation 1s steps(4, start) infinite;

      html[lang=ar] &,
      html[lang=fa] & {
        animation-name: typing-animation-rtl;
      }
    }
  }
}

@keyframes typing-animation {
  from {
    transform: translateX(-1rem);
  }
}

@keyframes typing-animation-rtl {
  from {
    transform: translateX(1rem);
  }
}
