// Variables
$primary: rgba(23, 190, 187, 1);
$secondary: rgba(240, 166, 202, 1);

$active: rgba(23, 190, 187, 0.8);
$busy: rgba(252, 100, 113, 0.8);
$away: rgba(255, 253, 130, 0.8);

// Triangle Mixin
@mixin triangle($color, $size, $direction) {
  width: 0;
  height: 0;
  @if $direction == "up" {
    border-right: ($size + px) solid transparent;
    border-left: ($size + px) solid transparent;
    border-bottom: ($size + px) solid $color;
  }
  @if $direction == "down" {
    border-right: ($size + px) solid transparent;
    border-left: ($size + px) solid transparent;
    border-top: ($size + px) solid $color;
  } 
  @if $direction == "right" {
    border-top: ($size + px) solid transparent;
    border-bottom: ($size + px) solid transparent;
    border-left: ($size + px) solid $color;
  }
  @if $direction == "left" {
    border-top: ($size + px) solid transparent;
    border-bottom: ($size + px) solid transparent;
    border-right: ($size + px) solid $color;
    }
}

* {
  margin: 0; padding: 0;
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
}

html,body {
  background: linear-gradient(120deg, $primary, $secondary);
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 70vh;
  width: 100%;
  h1 {
    margin: 0.5em auto;
    color: #FFF;
    text-align: center;
  }
}

.chatbox {
  background: rgba(255, 255, 255, 0.05);
  width: 85%;
  height: 100%;
  border-radius: 0.2em;
  position: relative;
  box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);

  .sender  {
    float: right;
    &:after {
      content: '';
      position: absolute;
      margin: -1.5em -18.98em;
      @include triangle(rgba(255, 255, 255, 0.2), 10, left);
    }
  }
  .reciever  {
    float: left;
    &:after {
    content: '';
    position: absolute;
    margin: -1.5em 2.65em;
    @include triangle(rgba(255, 255, 255, 0.2), 10, right);
    }
  }
  &__messages__user-message {
    width: 450px;
  }
  &__messages__user-message--ind-message {
    background: rgba(255, 255, 255, 0.2);
    padding: 1em 0;
    height: auto;
    width: 65%;
    border-radius: 5px;
    margin: 2em 1em;
    overflow: auto;
    & > p.name {
      color: #FFF;
      font-size: 1em;
    }
    & > p.message {
      color: #FFF;
      font-size: 0.7em;
      margin: 0 2.8em;
    }& > p.timestamp {
      color: #FFF;
      font-size: 0.7em;
      margin: 0 2.8em;
    }
  }
  &__user-list {
    background: rgba(255, 255, 255, 0.1);
    width: 25%;
    height: 100%;
    float: right;
    border-top-right-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    h1 {
      background: rgba(255, 255, 255, 0.05);
      color: rgba(255, 255, 255, 0.9);
      font-size: 0.9em;
      padding: 1em;
      margin: 0;
      font-weight: 300;
      text-align: center;
    }
  }
  &__user {
    width: 0.5em;
    height: 0.5em;
    border-radius: 100%;
    margin: 1em 0.7em;
    &--active {
      @extend .chatbox__user;
      background: $active;
    }
    &--busy {
      @extend .chatbox__user;
      background: $busy;
    }
    &--away {
      @extend .chatbox__user;
      background: $away;
    }
  }
  p {
    float: left;
    text-align: left;
    margin: -0.25em 2em;
    font-size: 0.7em;
    font-weight: 300;
    color: #FFF;
    width: 200px;
  }
  .form {
    background: #222;
    input {
      background: rgba(255, 255, 255, 0.03);
      position: absolute;
      bottom: 0;
      left: 0;
      border: none;
      width: 75%;
      padding: 1.2em;
      outline: none;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 300;
    }
    .add-message {
      background: rgba(255, 255, 255, 0.03);
      position: absolute;
      bottom: 1.5%;
      right: 26%;
      border: none;
      outline: none;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 300;
    }
  }
}

// Placeholder Styling
::-webkit-input-placeholder {
   color: rgba(255, 255, 255, 0.9);
}

:-moz-placeholder {
   color: rgba(255, 255, 255, 0.9);  
}

::-moz-placeholder {
  color: rgba(255, 255, 255, 0.9);
}

:-ms-input-placeholder {  
   color: rgba(255, 255, 255, 0.9);
}
.chatbox-message-box{
  height: 90%;
  width: 75%;
  position: relative;
  overflow-y: scroll;
  display:flex; 
  flex-direction:column-reverse;
}

.chatbox__user-list p{
  font-size:12px;
}

// ::-webkit-scrollbar {
// 	width: 4px;
// }
// ::-webkit-scrollbar-thumb {
// 	background-color: #4c4c6a;
// 	border-radius: 2px;
// }
// .chatbox {
//     width: 300px;
//     height: 400px;
//     max-height: 400px;
//     display: flex;
//     flex-direction: column;
//     overflow: hidden;
//     box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
// }
// .chat-window {
//     flex: auto;
//     max-height: calc(100% - 60px);
//     background: #2f323b;
//     overflow: auto;
// }
// .chat-input {
//     flex: 0 0 auto;
//     height: 60px;
//     background: #40434e;
//     border-top: 1px solid #2671ff;
//     box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
// }
// .chat-input input {
//     height: 59px;
//     line-height: 60px;
//     outline: 0 none;
//     border: none;
//     width: calc(100% - 60px);
//     color: white;
//     text-indent: 10px;
//     font-size: 12pt;
//     padding: 0;
//     background: #40434e;
// }
// .chat-input button {
//     float: right;
//     outline: 0 none;
//     border: none;
//     background: rgba(255,255,255,.25);
//     height: 40px;
//     width: 40px;
//     border-radius: 50%;
//     padding: 2px 0 0 0;
//     margin: 10px;
//     transition: all 0.15s ease-in-out;
// }
// .chat-input input[good] + button {
//     box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
//     background: #2671ff;
// }
// .chat-input input[good] + button:hover {
//     box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
// }
// .chat-input input[good] + button path {
//     fill: white;
// }
// .msg-container {
//     position: relative;
//     display: inline-block;
//     width: 100%;
//     margin: 0 0 10px 0;
//     padding: 0;
// }
// .msg-box {
//     display: flex;
//     background: #5b5e6c;
//     padding: 10px 10px 0 10px;
//     border-radius: 0 6px 6px 0;
//     max-width: 80%;
//     width: auto;
//     float: left;
//     box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
// }
// .user-img {
//     display: inline-block;
//     border-radius: 50%;
//     height: 40px;
//     width: 40px;
//     background: #2671ff;
//     margin: 0 10px 10px 0;
// }
// .flr {
//     flex: 1 0 auto;
//     display: flex;
//     flex-direction: column;
//     width: calc(100% - 50px);
// }
// .messages {
//     flex: 1 0 auto;
// }
// .msg {
//     display: inline-block;
//     font-size: 11pt;
//     line-height: 13pt;
//     color: rgba(255,255,255,.7);
//     margin: 0 0 4px 0;
// }
// .msg:first-of-type {
//     margin-top: 8px;
// }
// .timestamp {
//     color: rgba(0,0,0,.38);
//     font-size: 8pt;
//     margin-bottom: 10px;
// }
// .username {
//     margin-right: 3px;
// }
// .posttime {
//     margin-left: 3px;
// }
// .msg-self .msg-box {
//     border-radius: 6px 0 0 6px;
//     background: #2671ff;
//     float: right;
// }
// .msg-self .user-img {
//     margin: 0 0 10px 10px;
// }
// .msg-self .msg {
//     text-align: right;
// }
// .msg-self .timestamp {
//     text-align: right;
// }