.plugin-chat-list {
  /*
      Contains the chat-list component classes
  */
  padding-top: $general_padding_2 + $nav_bar_padding_top;
  margin-top: $general_margin_1;
  margin-left: $general_margin_2;
  margin-right: $general_margin_2;

  .chat-list-messages {
    /*
        Contains the Messages attributes unique to the Chat List
    */
    width: 100%;
    margin: $general_margin_1;
    border-color: $grey;
    border-width: $general_border * 4;
    border-radius: $general_border_radius * 2;

    .chat-list-group {
      margin: $general_margin_1;
    }

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

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

    }
  }
}

.plugin-chat-messages {
  /*
      Contains the msg-list component classes
  */
  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)
      */

    }

    .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.
      */
      min-height: $chat_messages_min_height;
      padding: $general_padding_1;
      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.
      */
      min-height: $chat_messages_min_height;
      padding: $general_padding_1;
      margin-bottom: $chat_messages_margin;

    }
    .chat-messages-contents {
      padding: $general_padding_2;
      white-space: pre-wrap;

    }
  }
}

.chat-messages-compose {
  /*
      Contains the compose message area attributes unique to the
      chat messages.
      Fixed to the bottom of the screen.
  */

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

  }
}

.chat-messages-btn-group {

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

  }
}