layer-conversation-item {
  cursor: pointer;
  padding: 6px 15px;
  color: black;
  border-bottom: @border-list-item;

  .layer-conversation-item-content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 1.8em;
  }

  &.layer-selected-item {
    background-color: #19a5e4;
  }

  /**
   * Conversation Avatars have 1 state:
   */
   layer-avatar {
    display: none;
  }


  /**
   * Conversation Titles have 3 states:
   * 1. Normal
   * 2. Unread
   * 3. Selected
   */
  layer-conversation-title {
    .layer-text-list-heading();
    margin-right: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline;
  }

  &.layer-conversation-unread-messages layer-conversation-title {
    .layer-text-list-heading-emphasized();
  }

  &.layer-selected-item layer-conversation-title,
  &.layer-selected-item.layer-conversation-unread-messages layer-conversation-title {
    color: white;
  }


  /**
   * Conversation Last Messages have 3 states:
   * 1. Normal
   * 2. Unread
   * 3. Selected
   */
  layer-conversation-last-message {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline;
    .layer-text-plain-deemphasized();
  }

  &.layer-conversation-unread-messages layer-conversation-last-message {
    .layer-text-plain-emphasized();
  }

   &.layer-selected-item  layer-conversation-last-message, &.layer-selected-item.layer-conversation-unread-messages  layer-conversation-last-message {
    color: @fontcolor-selected;
   }

  /**
   * Conversation Delete button has 2 states:
   * 1. Normal
   * 2. Selected
   */
   layer-delete {
      visibility: hidden;
    }

    &.layer-selected-item layer-delete {
      visibility: visible;
      opacity: 0.2;
      padding: 2px 0px 8px 0px;
      &:hover {
        opacity: 0.8;
      }
    }
}