:root {
  --avatar-color: #000;
}

.user--compact {
  align-items: center;
  min-width: 0;
}

.user--compact img,
.user--compact svg {
  border-radius: 50em;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px #f2f2f2;
  width: 32px;
  height: 32px;
}

.user--compact .user__avatar-name {
  width: 32px;
  height: 32px;
  border-radius: 50em;
  font-size: 12px;
  font-weight: 500;
  justify-content: center;
  align-items: center;
  display: flex;
  background: var(--avatar-color);
}

.user--compact .user__avatar-name,
.user--compact .user__avatar-name:hover {
  text-decoration: none;
  color: #fff;
}

.comment-wrapper .comment__meta .user--compact .user__avatar {
  width: 32px;
  height: 32px;
  overflow: hidden;
}

.comment-wrapper .comment__meta .user--compact .user__info {
  margin-left: 0;
}

.user--compact .user__link {
  display: flex;
  text-decoration: none;
  flex-grow: 1;
  --link-color: #363636;
  transition: 0.3s;
  min-width: 0;
}

.user--compact .user__info {
  margin-left: 0.4em;
  min-width: 0;
}

.user--compact .user__name {
  line-height: inherit !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.2em 1em 0.2em 0;
  min-width: 0;
}

.user--compact .user__company {
  color: #8F8F8F;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment .user--compact .user__company,
.node-article-teaser .user--compact .user__company,
.node-article-draft .user--compact .user__company,
.node-article-full .user--compact .user__company,
.participants .user--compact .user__company {
  display: none;
}

.block-new-members .user--compact .user__name:hover {
  padding: 0.2em 1em 0.2em 0;
  border-radius: 0.5em;
}