.user {
  display: flex;
  max-height: 82px;
  align-items: center;
  padding: 0;
  border: none;
  border-radius: 4px;
  border-left: 4px solid transparent;
  background: rgb(35, 15, 41);
  color: var(--text);
  transition:
    background-color 0.1s ease-out,
    border 0.1s ease-out;
}

.user:hover {
  cursor: pointer;
}
.user:hover,
.active.user {
  background-color: var(--background);
  box-shadow:
    0 0 4px var(--background),
    0 0 11px var(--background),
    0 0 19px var(--background);
}
.active.user {
  border-left: 4px solid var(--sun);
}

.avatar {
  width: 50px;
  height: 50px;
  margin-left: 1rem;
  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;
  margin-left: 1rem;
  background-color: black;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  content: "";
}

.meta {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem;
  font-size: 1.2rem;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
}

.balance {
  color: var(--sun);
}