.list-box {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.list {
  padding: 1px;
  flex: 1;
  overflow: scroll;
  position: relative;
}

.list>.group-item {
  border-bottom: solid 1px var(--divider-color);
  background-color: var(--background-color);
  position: sticky;
  top: -1px;
  text-transform: capitalize;
}

.list>.group-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.list>.list-item-box {
  display: flex;
  align-items: center;
}

.list-box.selectable>.list>.list-item-box:hover {
  cursor: pointer;
  background-color: var(--primary-color-lighter);
}

.list>.list-item-box.selected {
  cursor: pointer;
  background-color: var(--primary-color-light);
}

.list-item-box>.list-item {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.list-item-box>.list-item>.icon {
  margin-right: 1.6rem;
}

.list-item-box>.list-item>.avatar {
  margin-right: .8rem;
}

.list-item-box>.list-item>.thumb {
  margin-right: 1.6rem;
}

.list-item-box>.list-item>main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.list-item-box>.list-item>.meta {
  height: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-item-box>.list-item>aside {
  padding-left: .5rem;
  display: flex;
  align-items: center;
}