.container {
  height: 60vh;
  display: flex;
  flex-direction: column;
}

.scrollContainer {
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.userListItemContainer {
  display: flex;
  color: var(--relationship-modal-color);
  font-size: var(--l-font-18);
  line-height: var(--line-height-display);
  padding: 8px;
}

.userListItemContainer:hover {
  cursor: pointer;
  background-color: var(--listItem-background-primary-hover);
  border-radius: 8px;
}

.avatarContainer {
  margin: 0 8px 0 16px;
}

.username {
  color: var(--text-background-secondary-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selectedUsername {
  color: var(--text-background-primary-default);
}

.confirmButtonContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hidden {
  visibility: hidden;
  height: 0;
}

.error {
  padding-bottom: 8px;
  font-size: var(--s-font-14);
  line-height: var(--line-height-display);
  color: var(--error);
  padding-left: 6px;
  font-style: italic;
}

.listHeaderContainer {
  display: flex;
  justify-content: space-between;
  margin: 16px 8px 8px;
}

.selectionText {
  color: var(--text-background-secondary-default);
}

.previouslySelectedUsersContainer {
  border-bottom: 1px solid var(--separator-background-primary-default);
  padding-bottom: 8px;
  margin-bottom: 8px;
}
