.chat-contact-list {
  float: left;
  width: 100%;
  clear: both;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  margin: 0;
  list-style: none;

  li {
    padding: 10px 15px;
    position: relative;
    display: block;
    transition: background 0.3s ease;

    .contact-photo {
      box-shadow: 0px 0px 4px lighten($chat-primary, 15%);
    }

    &:hover {
      cursor: pointer;
      background-color: $chat-primary-dark;
    }

    &.has-unread {
      border-left: 3px solid $chat-secondary;
      padding-right: 25px;

      .contact-name {
        font-weight: 600;
        color: $chat-text-inverse;
      }

      .contact-last-message {
        color: $chat-icon;
        font-weight: 600;
      }
    }
  }
}