.plugin-chat-list {
  /*
      Contains the chat-list component classes
  */

  .chat-list-messages {
    /*
        Contains the Messages attributes unique to the Chat List
    */

    .chat-list-icon {
      /*
          Contains the icon attributes unique to the message class
          The icon is used to indicate unread messages
      */
      color: $general_icon_color;
      font-size: $general_font_size_3;

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

    }
    color: $font_colour_information;
    .fa {
      color: $general_icon_color;
      font-size: $general_font_size_3;
    }

  }
}

.plugin-chat-messages {
  /*
      Contains the msg-list component classes
  */

  .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)
      */
      font-size: $general_font_size_3;
      color: $font_colour_information;

    }
    .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.
      */
      text-align: left;
      border-radius: $general_border_radius * 4;

    }
    .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.
      */
      //right align and justified
      //direction: rtl;
      text-align: right;
      border-radius: $general_border_radius * 4;

    }
    .chat-messages-contents {
      color: $font_colour_data;
      font-size: $general_font_size_3;

    }
  }
}

.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.
    */

      border-width: $general_border;
      border-radius: $general_border_radius;
      border-color: $grey;
  }
}

.chat-messages-btn-group {

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

    @include button-settings;

  }
}