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

@SafeDistance: 12px;

.wm-list-item-half {
  width: calc((100vw - @SafeDistance * 2 * 2 - @SafeDistance * 2) / 2);
  border-radius: @border-radius-6;
  overflow: hidden;

  .img {
    width: 100%;
    height: 375px;
  }

  .info-box {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: @color-white;

    .info-head {
      display: flex;
      flex-direction: column;

      .title-box {
        display: flex;
        flex-direction: row;
        align-items: center;

        .title {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          line-height: 32px;
          word-break: break-all;
        }
      }

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

        .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 {
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .num-box {
        display: flex;
        flex-direction: row;
      }

      .comments-box {
        display: flex;
        flex-direction: row;
        margin-top: 10px;
        margin-bottom: 20px;

        .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;
        }
      }

      .stepper-box {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
      }
    }
  }
}