.root {
  display: flex;
  flex-direction: column;
}

.listWrapper {
  @apply flex-1;
  min-height: 0;
  overflow-y: auto;
}

.pagination {
  align-self: flex-end;
  margin: 12px 16px;
}

.actionButton {
  font-weight: 600;
}

.sortIcon {
  margin-right: 8px;
}

.cell {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.empty {
  @apply hidden;
}

.cellText {
  @apply truncate;
}

.userInfo {
  display: grid;
  column-gap: 12px;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: repeat(2, 20px);
}

.userInfoPicture {
  grid-column: 1 / span 1;
  grid-row: 1 / span 2;
}

.userInfoDisplayName {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  font-weight: 600;
  align-self: center;
  @apply truncate;
}

.userInfoRawID {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
  align-self: center;
  @apply truncate;
}

.anonymousUserLabel {
  font-style: italic;
}

.anonymizedUserLabel {
  font-style: italic;
}

.list div[role="columnheader"]:first-child,
.list div[role="gridcell"]:first-child {
  @apply sticky z-10 mobile:static mobile:z-0;

  left: 0;
  background-color: inherit;
}

.list div[role="row"] div[role="presentation"] {
  background-color: white;
}

.list div[role="row"] div[role="presentation"]:hover {
  background-color: #f3f2f1;
}
