.active-user-row {
  width: 100%;
  box-sizing: border-box;
}

.active-user-row__inner {
  display: flex;
  gap: 12px;
  padding: 12px 20px 8px;
}

.active-user-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.active-user-row__avatar-wrap {
  position: relative;
}

.active-user-row__add {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $accent;
  background: rgba(216, 180, 255, 0.08);
  border: 1px dashed rgba(216, 180, 255, 0.35);
}

.active-user-row__live {
  position: absolute;
  right: -4px;
  bottom: -2px;
  padding: 2px 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, $accent 0%, $accent-2 100%);
  color: $primary-on;
  font: 700 9px / 1.2 $font-body;
  border: 1.5px solid $bg;
}

.active-user-row__name {
  max-width: 60px;
  color: $fg-2;
  font: 500 11px / 1.2 $font-body;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
