.plugin-chat-list {
  /*
      Contains the chat-list component classes
  */
  padding-top: $general_padding_2;

  .chat-list-messages {
    /*
        Contains the Messages attributes unique to the Chat List
    */
    margin: 0 $general_padding_2 $general_padding_2 $general_padding_2;
    display: block;
    overflow: hidden;
    padding: $general_padding_2;
    border: $general_border solid $grey;
    border-radius: $general_border_radius;

    .chat-list-icon {
      /*
          Contains the icon attributes unique to the message class
          The icon is used to indicate unread messages
      */
      float: right;

    }
    .chat-list-title {
      /*
          Contains the topic text attributes unique to the message class
      */

    }
    .fa {
      float: right;
    }
  }
}

.plugin-chat-messages {
  /*
      Contains the msg-list component classes
  */
  overflow-y: scroll;
  padding-top: $general_padding_1;
  padding-bottom: $title_bar_height + $general_padding_5;
  margin-right: 2%;
  margin-left: 2%;

  .chat-messages-list {
    /*
        Attributes for the container of messages, unique to the Chat
        Messages.
        Scrolls through the messages with most recent at the bottom.
    */

    .chat-messages-details {
      /*
          Contains the message details text attributes unique to the
          message-list class.
          The message details should not be the focus of attention (text-muted)
      */
      width: 100%;
      float: left;
      position: relative;
      min-height: $chat_messages_min_height;
      padding-right: $general_padding_2;
      padding-left: $general_padding_2;

    }

    .chat-messages-sent {
      /*
          Contains the sent message attributes unique to the message-list
          class.
          Container is right aligned with background colour different to the
          received class.
          bg-success class applied for a successfully sent message.
      */
      width: 67%;
      float: left;
      position: relative;
      min-height: $chat_messages_min_height;
      padding: $general_padding_2;
      margin-bottom: $chat_messages_margin;

    }
    .chat-messages-received {
      /*
          Contains the received text attributes unique to the message-list
          class.
          Container is right aligned with background colour different to the
          sent class.
          bg-warning class applied for an emergency priority message.
      */
      margin-left: 33%;
      width: 67%;
      float: left;
      position: relative;
      min-height: $chat_messages_min_height;
      padding: $general_padding_2;
      margin-bottom: $chat_messages_margin;

    }
    .chat-messages-contents {

    }
  }
}

.chat-messages-compose {
  /*
      Contains the compose message area attributes unique to the
      chat messages.
      Fixed to the bottom of the screen.
  */
  bottom: 0;
  position: fixed;
  width: 100%;
  background: $white;
  padding-top: $general_padding_1;
  padding-bottom: $title_bar_height + $general_padding_1;

  .chat-messages-new-text {
    /*
        Contains the new message text attributes unique to the
        chat-messages-compose class.
    */
    height: $general_height_3;

  }
}

.chat-messages-btn-group {
  padding-top: $general_padding_2;
  float: right;

  .chat-messages-btn {
    /*
        Contains the button attributes unique to the
        chat-messages-compose class.
    */
    float: left;

  }
}