@import "styles/_variables";

.avatar {
  width: 24px;
  height: 24px;
}

.user-list {
  display: block;
}

.user-list-wrapper {
  overflow-y: auto;
}

.user-list-header {
  display: grid;
  grid-template-columns: 24px auto 75px 75px 75px 125px 125px 24px;
  grid-gap: 15px;
  padding: 15px;
}

.user-list-header div {
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
  user-select: none;
}

.user-list-item {
  display: grid;
  grid-template-columns: 24px auto 75px 75px 75px 125px 125px 24px;
  grid-gap: 15px;
  padding: 19px 15px;
  text-align: left;
  background: var(--background-card);
  box-shadow: inset 0 0.5px 0 rgba(143, 144, 166, 0.5);
}

.user-list-item div {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--color-item);

  &:nth-child(2) {
    color: var(--color-text);
  }

  svg {
    width: 22px;
    height: 22px;
    color: #b0b1c3;
  }
}

@media only screen and (max-width: 992px) {
  .user-list-header,
  .user-list-item {
    min-width: 800px;
  }
}
