@import "mixins/mixins";
@import "common/var";

@include b(comment) {
  padding: 16px;
  background-color: $--color-white;
  // box-shadow: 0 2px 10px 0 rgba(78,89,105,0.1000);
  // border-radius: 8px;
  //border-radius: $--border-radius-large;
  // border: 1px solid #E5E6EB;
  width: 566px;
  // @include e(container) {
  //   padding: 16px;
  //   background-color: #fff;
  //   // box-shadow: 0 2px 10px 0 rgba(78,89,105,0.1000);
  //   border-radius: 8px;
  //   // border: 1px solid #E5E6EB;
  //   width: 566px;
  // }
  .el-comment__item {
    display: flex;
    flex-direction: column;
    .el-comment__item--top {
      display: flex;
      .head-img {
        width: 32px;
        height: 32px;
        // border-radius: 50%;
        border-radius: $--border-radius-circle;
        margin-right: 12px;
      }
      .right-side {
        display: flex;
        flex-direction: column;
        width: 100%;
        
        .right-side--top {
          display: flex;
          .name, .time {
            color: $--color-text-2;
            font-size: $--font-size-body-4;
            font-weight: $--font-weight-400;
            line-height: 22px;
          }
          .name {
            margin-right: 12px;
          }
          .time {
            color: $--color-text-3;
          }
          &.right-side-top-between {
            justify-content: space-between;
          }
        }
        .right-side__content {
          width: 100%;
          font-size: $--font-size-body-4;
          font-weight: $--font-weight-400;
          line-height: 22px;
          margin-bottom: 8px;
          color: $--color-text-1;
        }
        .right-side__content--reply {
          margin-bottom: 0;
        }
      }
    }
    .el-comment__item--bottom {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: $--color-text-1;
      .el-comment__item_icon-box {
        cursor: pointer;
        display: flex;
        align-items: center;
        height: 22px;
        line-height: 22px;
        margin-right: 16px;
        &:last-of-type {
          margin-right: 0;
        }
        i {
          margin-right: 4px;
        }
        span {
          font-size: $--font-size-body-4;
          font-weight: $--font-weight-400;
        }
        .el-icon-thumb-up-fill {
          color: $--primary-6;
        }
      }
      .el-comment__item__active-icon-box {
        color: $--primary-6;
      }
    }
  }
  .el-comment__item--extra-comment {
    display: flex;
    flex-direction: column;
    .el-comment__item--top {
      width: 100%;
      display: flex;
      margin-top: 16px;
      .head-img {
        width: 32px;
        height: 32px;
        // border-radius: 50%;
        border-radius: $--border-radius-circle;
        margin-right: 12px;
      }
    }
    .el-comment__item--bottom {
      display: flex;
      justify-content: flex-end;
      margin-top: 8px;
    }

  }
}