// Core variables and mixins
@import "../bootstrap/functions";
@import "../bootstrap/mixins";
@import "../bootstrap-extended/mixins";

// Load variable overrides
@import "../core/variables/variables";
@import "../bootstrap/variables";

// Overrides user variable
@import "../core/variables/components-variables";

// Chat Application Section
.chat-application{
  .chat-app-window{
    .user-chats{
      padding: 10px 20px;
      position: relative;
      text-align: center;
      height: 415px;
      // Chat area css
        .chats {
          padding: 0;
          .chat-body {
            display: block;
            margin: 10px 30px 0 0;
            overflow: hidden;
            .chat-content {
              text-align: left;
              display: block;
              float: right;
              padding: .75rem 1rem;
              margin: 0 20px 10px 0;
              clear: both;
              color: $white;
              background: linear-gradient(118deg,rgba($primary,1),rgba($primary,.7));
              border-radius: .5rem;
              box-shadow: 0 4px 8px 0 rgba(0,0,0,.12),0 2px 4px 0 rgba(0,0,0,.08);
              p{
                margin: 0;
              }
            }
          }
          .chat-avatar{
              float: right;
          }
          // Chat area left css
          .chat-left {
            .chat-avatar{
              float: left;
            }
            .chat-body {
              margin: 0;

            }
            .chat-content{
              text-align: left;
              float: left;
              margin: 10px 10px 10px 20px;
              color: $body-color;
              background: none;
              background-color: lighten($white, 18%);
              border: 1px solid $gray-300;
            }
          }
        }
    }
  }
}