.fw-avatar {
  position: relative;
  display: inline-flex;
  width: var(--avatar-size);
  height: var(--avatar-size);
}
.fw-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: var(--avatar-ring-width) solid var(--avatar-ring-color);
}
.fw-avatar .avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: var(--status-dot-size);
  height: var(--status-dot-size);
  border-radius: 50%;
  background-color: var(--status-dot-color-online);
  border: var(--avatar-ring-width) solid var(--avatar-ring-color);
}

.fw-avatar-group {
  display: inline-flex;
}
.fw-avatar-group .fw-avatar + .fw-avatar {
  margin-left: calc(-1 * var(--avatar-stack-overlap));
}