﻿.comment{
  background-color:#fff;
  margin-top:$component-span;
}

.comment-header{
  background-color:#fff;
  padding:$content-padding;
  .user-info{
    @include horizional-flex-align-center;
    padding-left:$spacer2;
    .login{
      width: $component-size-large;
      height: $component-size-large;
      border-radius:$component-size-large;
      border: $border-width solid $primary-color;
      line-height:$component-size-large -2*$border-radius;
      text-align:center;
      color:$primary-color;
      position:relative;
      bottom:-$component-span;
      z-index:100;
      background-color:#fff;
      .avatar{
        width:$component-size-large;
        height:$component-size-large;
        border-radius:$component-size-large;
        margin-right:$component-span;
      }
      .nickname{
        display:block;
      }
    }
  }
}
.post-box{
  position:relative;
  .post-input-wrapper{
    padding:$content-padding;
    border: $border-width solid $border-color;
    overflow:hidden;
    background-color: #fff;
    border-radius:1.2rem;
    background-image: url("#{$resourceRoot}/image/comment-background.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .post-input{
    display: block;
    width: 100%;
    height: 70px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    font-size:$font-size;
    resize: none;
    line-height: normal;
    text-align: left;
    background-color:transparent;
    padding:0;
  }
}
.post-footer{
  margin-top:$component-span;
  text-align:right;
  .post-button{
    width: 10rem;
    height: $component-size;
    overflow: hidden;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-image: url("#{$resourceRoot}/image/post-button.png");
    background-repeat: no-repeat;
    background-color: transparent;
    outline:none;
  }
}
@media (max-width: $sm) {
  .post-footer{
    .post-button{
      width: 100%;
      color:#fff;
      border-radius:$border-radius;
      overflow: hidden;
      border: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;
      background-image: none;
      background-color:$primary-color;
      outline:none;
    }
  }
}
.comment-sofa {
  text-align: center;
  margin-bottom:$component-span;
  &:before {
    content: '';
    display: inline-block;
    width: 12.5rem;
    height: 6rem;
    margin-bottom: $component-span;
    background:url(data:image/png;base64, );
    background-size: 100% 100%;
  }
  .sofa-text{
    font-size: $font-size;
    color:$sub-color;
    font-style:italic;
    @include list-unstyled;
  }
}

.comment-list-header{
  @include horizional-flex-align-center;
  padding:$content-padding;
  border-bottom:$border-width solid $primary-color;
  h3{
    @include horizional-flex;
    margin:0;
  }
  .comment-statistic{
    @include horizional-flex-align-center;
    .comment-statistic-item{
      margin-left:2rem;
      .count{
        font-size:$font-size*1.5;
        font-weight:bold;
        color:$primary-color;
      }
    }
  }
}
.comment-list-box{
  padding:$content-padding;
}
.comment-list{
  list-style-type:none;
  padding-left:0;
  ul{
   @include list-unstyled;
    li{
      border:$border-width solid $border-color;
      .comment-left{
        img{
          width: $component-size;
          height: $component-size;
          border-radius: $component-size;
          margin-right: $content-padding;
        }
      }
      .comment-item-header{
        .auth-user-info{
          img{
            width: $component-size;
            height: $component-size;
            border-radius: $component-size;
            margin-right: $content-padding;
          }
        }
      }
    }
  }
  li{
    padding:$content-padding;
    margin-bottom:$component-span;
    background-color:#fff;
    .comment-box{
      @include horizional-flex;
    }
    .comment-left{
      img{
        width: $component-size;
        height: $component-size;
        border-radius: $component-size;
        margin-right:$content-padding;
      }
    }
    .comment-right{
      @include flex-adapter;
      .comment-body{
        margin-top: 3rem;
        position: relative;
        font-size: $font-size;
        padding: 2rem;
        color:$content-color;
        border-top-left-radius: 2.4rem;
        border-top-right-radius: 4.8rem;
        border-bottom-right-radius: 2.4rem;
        border-bottom-left-radius: 6.4rem;
        background-color: $background-color;
        &:before{
          top:-2.6rem;
          width: 2rem;
          height: 2rem;
          border-radius: 2rem;
          -webkit-transform: skew(-15deg);
          content: "";
          background-color: transparent;
          position: absolute;
          display: block;
        }
      }
    }
    &.block-hover{
      background-color:#f5fafe;
    }
    .comment-item-header{
      .auth-user-info{
        img{
          width: $component-size-large;
          height: $component-size-large;
          border-radius:$component-size-large;
          margin-right: $component-span;
        }
      }
    }
  }
}
.comment-item-header{
  @include horizional-flex-align-center;
  margin-bottom: $component-span;
  .auth-user-info{
    @include horizional-flex-align-center;
    @include flex-adapter;
  }
  .username{
    display: block;
    color:$sub-color;
    font-size: $font-size;
  }
  .comment-info{
    .comment-datetime{
      font-size:$font-size;
      color:$sub-color;
    }
  }
  .post-info-box{
    @include flex-adapter;
  }
}
.comment-content{
  padding:$component-span;
  font-size:$font-size;
  position:relative;
}
.comment-footer{
  @include horizional-flex-align-center;
  padding: 0 $component-span;
  .toolbar{
    display:block;
    @include flex-adapter;
    &>*{
      float:right;
    }
  }
}
.comment-editor{
  @include vertical-flex;
  .toolbar{
    background: #efefef;
    padding:$text-span $component-span;
    border-bottom: $border-width solid rgba(0,0,0,0.05);
    display: -webkit-box;
    .toolbar-item{
      margin-right:$text-span;
    }
    .icon-button{
      text-align: center;
      background-repeat: no-repeat;
      width: $component-size-small;
      height: $component-size-small;
      margin: $icon-text-span;
      border-radius:$component-size-small;
      border: $border-width solid $black;
    }
  }
  .content{
    display:block;
    @include flex-adapter;
    background: #fff;
    outline: none;
    padding:$content-padding;
    overflow-y:scroll;
    min-height:10rem;
    background-image:url("#{$resourceRoot}/image/comment-background.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  textarea.code{
    display:block;
    @include flex-adapter;
    background: #fff;
    outline: none;
    padding:$content-padding;
    overflow-y:scroll;
  }
  .image-container{
    overflow:hidden;
    display: inline-block;
    position:relative;
    &.setting{
      border: $border-width-large solid $content-color;
    }
    img{
      width:100%;
    }
    .image-setting-bar{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      background:rgba(255, 255, 255, 0.7);
      padding: $content-padding;
      &>*{
        margin-right:0.1rem;
        margin-bottom:0.1rem;
        @include list-unstyled;
      }
    }
  }
}
.blank-comment{
  background-image: url("#{$resourceRoot}/image/blank-comment.png");
  display: block;
  margin: 5rem auto;
  width: 22.5rem;
  height: 12rem;
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  overflow: hidden;
  color: $sub-color;
  @include list-unstyled;
}