.user {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  color: var(--text);
  transition: background-color 0.1s ease-out, border 0.1s ease-out;
}

.user:hover {
  border-color: var(--border);
  cursor: pointer;
}

.active {
  border-color: var(--border);
  background: var(--border);
}

.active:hover {
  /* TODO */
}

.avatar {
  width: 50px;
  height: 50px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.avatarWrap {
  filter: drop-shadow(0 0 4px var(--background)) drop-shadow(0 0 11px var(--background))
    drop-shadow(0 0 19px var(--background));
}

.noAvatar {
  display: block;
  width: 50px;
  height: 50px;
  background-color: black;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  content: "";
}

.name {
  font-weight: bold;
}