@mixin panel-frame {
  .panel__item-title {
    font-size: 16px;

    > [class*='el-icon-'] {
      font-size: 18px;
      margin-right: 12px;
    }
  }
  .panel__item-body {
    margin-top: 10px;
  }
}

@mixin articles-comments {
  @include panel-frame;
  .panel__item-body {
    .body-item {
      display: flex;
      padding: 8px 0;
    }

    .body-pic {
      flex: 0 0 auto;
      width: 60px;
      height: 60px;
      overflow: hidden;

      img {
        @include zoom-define();
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      img:hover {
        @include zoom-trigger();
      }
    }

    .body-info {
      margin-left: 12px;

      &__title a {
        transition: all 0.38s ease-in-out;
        @include clamp(2);
      }

      &__title:hover a,
      &__title:hover {
        @include themify() {
          color: themed('a-color');
        }
      }

      &__name {
        display: block;
        @include themify() {
          color: themed('meta-grey');
        }
        font-size: 85%
      }

      &__date {
        display: block;
        @include themify() {
          color: themed('meta-grey');
        }
        font-size: 85%
      }
    }
  }
}
