.DotAnimation {
  display: inline-flex;
  align-items: center;

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

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

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

      body.in-background & {
        animation-play-state: paused;
      }
    }
  }
}

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

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