#whos-online {
  color: var(--primary-medium);
  padding-left: 5px;
  padding-bottom: 5px;

  a {
    transition:
      margin-right 1s,
      margin-left 1s,
      opacity 0.5s;
    transition-delay: 1s;
    opacity: 1;

    &.is-hidden {
      opacity: 0;
    }
  }

  &.collapsed {
    a {
      margin-right: -15px;
      margin-left: 0;
    }

    &:hover a {
      margin-left: 0;
      margin-right: 0;

      &:first-of-type {
        margin-left: 0;
      }

      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}

html.whos-online-glow {
  #user-card.user-online .user-card-avatar img.avatar {
    box-shadow: 0 0 8px 3px var(--success-medium);
  }

  .topic-avatar.user-online img.avatar {
    box-shadow: 0 0 4px 1px var(--success-medium);
  }

  .topic-map .avatars .user-online img.avatar {
    box-shadow: 0 0 2px 1px var(--success-medium);
  }

  &.mobile-view .topic-list-item.last-poster-online img.avatar {
    box-shadow: 0 0 4px 1px var(--success-medium);
  }

  .latest-topic-list .latest-topic-list-item.last-poster-online img.avatar {
    box-shadow: 0 0 4px 1px var(--success-medium);
  }

  body.user-page-online .primary img.avatar {
    box-shadow: 0 0 8px 3px var(--success-medium);
    margin: 8px;
  }

  body.user-page-online .collapsed-info .primary img.avatar {
    box-shadow: 0 0 4px 1px var(--success-medium);
    margin: 5px;
  }
}

html.whos-online-ring {
  #user-card.user-online .user-card-avatar img.avatar {
    box-shadow:
      0 0 0 2px var(--secondary),
      0 0 0 5px var(--success-medium);
  }

  .topic-avatar.user-online img.avatar {
    box-shadow:
      0 0 0 1px var(--secondary),
      0 0 0 3px var(--success-medium);
  }

  .topic-map .avatars .user-online img.avatar {
    box-shadow:
      0 0 0 1px var(--secondary),
      0 0 0 2px var(--success-medium);
  }

  &.mobile-view .topic-list-item.last-poster-online img.avatar {
    box-shadow:
      0 0 0 1px var(--secondary),
      0 0 0 3px var(--success-medium);
  }

  .latest-topic-list .latest-topic-list-item.last-poster-online img.avatar {
    box-shadow:
      0 0 0 1px var(--secondary),
      0 0 0 3px var(--success-medium);
  }

  body.user-page-online .primary img.avatar {
    box-shadow:
      0 0 0 2px var(--secondary),
      0 0 0 5px var(--success-medium);
    margin: 8px;
  }

  body.user-page-online .collapsed-info .primary img.avatar {
    box-shadow:
      0 0 0 1px var(--secondary),
      0 0 0 3px var(--success-medium);
    margin: 5px;
  }
}

.whos-online-flair-prototype {
  display: block;
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--success);
  border: 2px solid var(--secondary);
  pointer-events: none;
}

html.whos-online-flair {
  #user-card.user-online .user-card-avatar::before {
    @extend .whos-online-flair-prototype;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
  }

  .topic-avatar.user-online::before {
    @extend .whos-online-flair-prototype;
    top: 13px;
    left: 1px;
    height: 10px;
    width: 10px;
    z-index: 1;
  }

  &.mobile-view .topic-avatar.user-online::before {
    top: 3px;
  }

  .topic-map .avatars div {
    // Add some spacing to the avatars
    margin-left: 5px;
  }

  .topic-map .avatars .user-online::before {
    @extend .whos-online-flair-prototype;
    top: -1px;
    left: -1px;
    height: 7px;
    width: 7px;
  }

  &.mobile-view .topic-list-item.last-poster-online div.pull-left {
    position: relative;
  }

  &.mobile-view .topic-list-item.last-poster-online div.pull-left::before {
    @extend .whos-online-flair-prototype;
    top: -1px;
    left: -1px;
    height: 10px;
    width: 10px;
  }

  .latest-topic-list .latest-topic-list-item.last-poster-online .topic-poster {
    position: relative;
  }

  .latest-topic-list
    .latest-topic-list-item.last-poster-online
    .topic-poster::before {
    @extend .whos-online-flair-prototype;
    top: -1px;
    left: -1px;
    height: 10px;
    width: 10px;
  }

  body.user-page-online
    .about:not(.collapsed-info)
    .primary
    .user-profile-avatar::before {
    @extend .whos-online-flair-prototype;
    top: 5px;
    left: 5px;
    height: 20px;
    width: 20px;
    transition: all 0.1s linear;
    z-index: 1;
  }

  body.user-page-online .collapsed-info .primary::before {
    @extend .whos-online-flair-prototype;
    top: -1px;
    left: -1px;
    height: 10px;
    width: 10px;
    z-index: 1;
  }
}
