.topic-above-footer-buttons-outlet.presence {
  min-height: 1.8em; // height of the avatars, prevents layout shift
  margin: var(--below-topic-margin) 0;
}

.presence-users {
  background-color: var(--secondary);
  color: var(--primary-medium);
  display: flex;

  span.presence-text {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    margin-left: 8px;
  }

  .presence-avatars {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
  }

  .wave {
    display: inline-flex;
    flex: 0 0 auto;

    .dot {
      display: inline-block;
      @media (prefers-reduced-motion: no-preference) {
        animation: wave 1.8s linear infinite;
      }

      &:nth-child(2) {
        animation-delay: -1.6s;
      }

      &:nth-child(3) {
        animation-delay: -1.4s;
      }
    }
  }

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

    30% {
      transform: translateY(-0.2em);
    }
  }
}

.composer-fields .presence-users {
  overflow: hidden;
  flex-shrink: 1;
  .presence-avatars {
    flex-wrap: nowrap;
  }
}

.mobile-view .composer-fields .presence-users .description {
  display: none;
}

// TMP: RTL overrides
.rtl {
  span.presence-text {
    margin-right: 8px;
  }

  .composer-fields .presence-users {
    right: unset;
    left: 95px;
  }

  &.mobile-view {
    .composer-fields .presence-users {
      right: unset;
      left: 65px;
    }
  }
}

// Always hide the "Topic Presence" in the topic timeline
.topic-navigation.with-timeline .topic-navigation-bottom-outlet.presence {
  display: none;
}

// Hide the "Topic Presence" in the topic footer when the timeline is hidden
body:has(.topic-navigation.with-topic-progress)
  .topic-above-footer-buttons-outlet.presence {
  display: none;
}

.topic-navigation-bottom-outlet.presence {
  margin-right: auto;
  order: -1;
  display: flex;
}