@import '../../style/variables.less';

.wm-list-item-middle {
  background: @color-white;
  border-radius: @border-radius-6;
  margin: 24px 24px 0 24px;
  display: flex;
  flex-direction: row;

  .img {
    width: 256px;
    height: 256px;
    margin-right: 24px;
  }

  .info-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .info-head {
      .title-box {
        display: flex;
        flex-direction: row;

        .title {
          font-size: @font-size-12;
          line-height: 32px;
          word-break: break-all;
        }
      }

      .type-box {
        display: flex;
        flex-direction: row;
        margin-top: 10px;

        .type-color {
          color: rgba(0, 0, 0, 0.4);
          font-size: @font-size-10;
        }

        .size {
          color: rgba(0, 0, 0, 0.4);
          font-size: @font-size-10;
          margin: 0 4px;
        }

        .weight {
          color: rgba(0, 0, 0, 0.4);
          font-size: @font-size-10;
        }
      }

      .label-box {
        display: flex;
        flex-direction: row;
        margin-top: 16px;
      }
    }

    .info-footer {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .comments-box {
        display: flex;
        flex-direction: row;
        margin-bottom: 4px;

        .comments-num {
          color: rgba(0, 0, 0, 0.4);
          font-size: @font-size-10;
          margin: 0 8px;
        }

        .comments {
          color: rgba(0, 0, 0, 0.4);
          font-size: @font-size-10;
        }
      }

      .num-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: -14px;
        margin-right: -12px;
      }
    }
  }
}