@import '../../../assets/sass/variable';

$chat-module: $module-rem;
$chat-animation: $animation;
$chat-color: #000;
$chat-fs: $main-fs;
$chat-info-color: $info-color;
$chat-success-color: #0bd237;
$chat-shape: $shape;
$chat-dialog-bg: main-color(50);
$chat-messages-bg: #fff;

:host {
  background: #fff;
  border-radius: $chat-shape;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  height: 500px;
  max-height: 100%;
  width: 100%;

  .chat-wrap {
    display: flex;
    height: 100%;
    max-height: inherit;

    .dialog {
      background: $chat-dialog-bg;
      display: flex;
      flex-direction: column;
      max-height: inherit;
      width: 100%;
      height: 100%;

      .btn {
        align-items: center;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        color: rgba(#000,.3);
        cursor: pointer;
        display: flex;
        font-size: 20px;
        height: ($chat-module * 4);
        justify-content: center;
        outline: none;
        padding: 0;
        transition: color .2s $chat-animation;
        width: ($chat-module * 4);

        &:hover,
        &:focus {
          color: #000;
        }
      }
      .dialog-header {
        align-items: center;
        background: #fff;
        border-bottom: 1px solid rgba(#000,.1);
        display: flex;
        padding: $chat-module $chat-module;

        .user-avatar {
          align-items: center;
          background: main-color(300);
          border-radius: 50%;
          color: main-contrast(300);
          display: flex;
          height: 36px;
          justify-content: center;
          margin: 0 $chat-module;
          overflow: hidden;
          width: 36px;

          .text-avatar {
            font-size: 20px;
            line-height: 1;
          }
        }
        .user-info {
          flex-grow: 2;

          .user-name {
            font-size: $chat-fs;
            margin: 0;
          }
          .user-last-seen {
            line-height: 1;
            opacity: .8;

            &.online {
              color: $chat-info-color;
              opacity: 1;
            }
          }
        }
      }
      .dialog-messages {
        height: 100%;
        min-height: 300px;
        overflow: auto;

        .messages-list {
          padding: ($chat-module / 2) ($chat-module * 2) 0;

          .message {
            padding: ($chat-module / 2) 0;
            transition: transform .2s $chat-animation;
            width: 90%;

            .message-content {
              background: $chat-messages-bg;
              border-radius: 5px;
              display: inline-block;
              padding: ($chat-module / 2) $chat-module;
              position: relative;

              &:before {
                border: 5px solid transparent;
                border-bottom-color: $chat-messages-bg;
                bottom: 0;
                content: '';
                display: block;
                height: 0;
                left: -5px;
                position: absolute;
                width: 0;

                .rtl & {
                  left: auto;
                  right: -5px;
                }
              }
            }
            .message-date {
              font-size: 90%;
              margin-top: ($chat-module / 4);
              opacity: .8;
            }
            &.my-message {
              margin-left: auto;
              text-align: right;

              .rtl & {
                margin-left: 0;
                margin-right: auto;
                text-align: left;
              }
              .message-content {
                background: $chat-success-color;
                color: #fff;

                &:before {
                  border-bottom-color: $chat-success-color;
                  left: auto;
                  right: -5px;

                  .rtl & {
                    left: -5px;
                    right: auto;
                  }
                }
              }
            }
          }
        }
        &.add-message {
          .messages-list {
            .message {
              &:last-child {
                transform: scale(0);
              }
            }
          }
        }
      }
      .dialog-footer {
        align-items: flex-end;
        background: #fff;
        border-top: 1px solid rgba(#000,.1);
        display: flex;
        flex-shrink: 0;
        min-height: ($chat-module * 4);
        padding: 0 $chat-module;

        .btn {
          &.send-message {
            color: $chat-info-color;

            &:hover,
            &:focus {
              color: #000;
            }
          }
        }
        .message-box {
          flex-grow: 2;
          padding: $chat-module 0;

          .enter-message {
            background: none;
            border: 0;
            display: block;
            font-family: inherit;
            font-size: 14px;
            height: auto;
            line-height: 1.6;
            max-height: ($chat-module * 8);
            min-height: ($chat-module * 2);
            outline: none;
            overflow: hidden;
            padding: 0;
            resize: none;
            width: 100%;

            &::-webkit-input-placeholder {
              color: rgba(#000,.5);
            }
            &::-moz-placeholder {
              color: rgba(#000,.5);
            }
            &:-ms-input-placeholder {
              color: rgba(#000,.5);
            }
            &:-moz-placeholder {
              color: rgba(#000,.5);
            }
          }
        }
      }
    }
  }
}

.avatar-div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .image-avatar {
    img {
      border-radius: 50%;
    }
  }
}
.my-message {
  .avatar-div {
    justify-content: flex-end;
  }
}