/* Styles for Conversation Items that appear within the Conversation List widget */
layer-conversation-item {

  /* Style a basic Conversation Item.  Note that it may be better to put
   * background color on layer-conversations-list rather than layer-conversation-item
   */
  .layer-list-item {
    cursor: pointer;
    padding: 20px 5px;
    border-left: 3px solid transparent;
    border-bottom: @border-list-item;
    &:not(:first-child) {
      border-top: @border-list-item;
    }
  }

  /* Style the selected Conversation Item */
  &.layer-selected-item  .layer-list-item {
    border-left: 3px solid #19A5E4;
  }

  /**
   * 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;
  }

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

  &.layer-selected-item layer-conversation-title {

  }

  /**
   * Conversation Avatars have 3 states:
   * 1. Normal
   * 2. Unread
   * 3. Selected
   */
   layer-avatar img, layer-avatar span {
      color: @fontcolor-lightest;
      border: @border-lightest;
      border: 1px solid rgba(0,0,0,0.1);
   }

   &.layer-selected-item layer-avatar {

   }

  /**
   * Conversation Last Messages have 3 states:
   * 1. Normal
   * 2. Unread
   * 3. Selected
   */
   layer-conversation-last-message {
      .layer-text-plain-deemphasized();

      /* Prevent videos, images and line breaks from messing with a concise one line last-message */
      iframe, img:not(.emoji), br {
        display: none;
      }
   }

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

   &.layer-selected-item  layer-conversation-last-message {

   }


  /**
   * 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 4px 8px;
      &:hover {
        opacity: 0.8;
      }
    }
}