@list-item--padding: 10px;


.list-item {
  display: flex;
  padding: @list-item--padding;
  align-items: center;
  flex: 1;

  &__avatar {
    .avatarer(@avatar-size-sm);
    margin-right: @list-item--padding;
  }

  &__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    // setting the width here is overwritten by __content's flex property
    // but it enables our text-overflow: ellipsis to work
    width: 0;
  }

  &__name, &__title {
    .header--small;
    color: @color--gray-dark;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__description {
    .list-item__description;
  }

  &__extra {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: @list-item--padding;
  }
}

.list-item__description {
  .content--small;
  color: @color--gray;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.list-item.m--border {
  background-color: @color--white;
  border: 1px solid @color--gray-lighter;
  border-radius: 3px;
  box-size: border-box;
}