@import "variables.scss";
@import "common.scss";

.#{$namespace}group-message.#{$namespace}from-client {
  span.#{$namespace}message-date {
    text-align: right;
    flex-basis: 100%;
    margin-left: 0;
    margin-right: 4px;
    margin-top: 5px;
    font-size: 11px;
    color: #a4a7ab;
  }
}

.#{$namespace}group-message.#{$namespace}from-response {
  span.#{$namespace}message-date {
    text-align: left;
    flex-basis: 100%;
    margin-left: 7px;
    margin-top: 5px;
    font-size: 11px;
    color: #a4a7ab;
  }
  // When we have several messages, the first one of the group
  .#{$namespace}message:first-child:not(:only-child) {
    .#{$namespace}response {
      border-radius: 0 15px 15px 0;
    }
    margin-bottom: 2px;
  }
  // When we have several messages, messages that are neither the first, nor the last
  .#{$namespace}message:not(:first-child):not(:last-child):not(:last-child) {
    .#{$namespace}response {
      border-radius: 0 15px 15px 0;
    }
    margin-top: 2px;
    margin-bottom: 2px;
  }
  // every message in a group that is NOT the first
  .#{$namespace}message:not(:first-child):not(:only-child) {
    .#{$namespace}avatar {
      display: none;
    }
    &.#{$namespace}with-avatar {
      margin-left: 33px;
    }
  }
  // When we have several messages, the last one of the group
  .#{$namespace}message:last-child:not(:only-child) {
    margin-top: 2px;
  }
}

.#{$namespace}message.#{$namespace}typing-indication {
  .#{$namespace}response {
    box-sizing: content-box;
    height: 16px;
  }
}


.#{$namespace}messages-container {
  background-color: $white;
  height: 50vh;
  max-height: 425px;
  overflow-y: auto;
  @media screen and (min-width: 800px){
    height: 510px;
    max-height: 50vh;
  }
  padding-top: 10px;
}

.#{$namespace}widget-embedded {
  .#{$namespace}messages-container {
    height: 100%;
    max-height: 100%;
  }
}

.#{$namespace}full-screen {

  .#{$namespace}messages-container {
    @include messages-container-fs;
  }
}

@media screen and (max-width: 800px)  {
  .#{$namespace}messages-container {
    @include messages-container-fs;
  }
}

div#wave {
  position:relative;
  text-align:center;
  width:25px;
  height:13px;
  margin-left: auto;
  margin-right: auto;
  .#{$namespace}dot {
    opacity: 0.4;
    display:inline-block;
    width:5px;
    height:5px;
    border-radius:50%;
    margin-right:3px;
    background: #000000;
    animation: wave 1.6s linear infinite;

    &:nth-child(2) {
      animation-delay: -1.4s;
    }

    &:nth-child(3) {
      animation-delay: -1.2s;
    }
  }
}

@keyframes wave {
  0%, 60%, 100% {
    transform: initial;
  }

  30% {
    transform: translateY(-5px);
  }
}
