@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";

.item {
  /* normal */
  position: relative;
  .flex(@justifyCenter: flex-start);
  .size(@w: 1680px, @h: 372px);
  padding: 30px 60px;
  background-image: url("../../../../../assets/images/img-partners-banner-td-hor@3x.png");
  background-position: center;
  background-size: contain;

  // image area (left)
  > figure:nth-child(1) {
    .flex();
    overflow: hidden;
    .size(@w: 558px, @h: 312px);
    margin-right: 30px;
    border-radius: 16px;
    background-color: @COLOR_WHITE;

    > img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  // product infomation (center)
  > div:nth-child(2) {
    .flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
    .size(@w: 648px, @h: 100%);
    padding: 12px 0;

    // top
    > div:nth-child(1) {
      .size(@w: inherit, @h: 112px);

      .specialValue {
        display: block;
        .size(@w: 240px, @h: 48px);
        margin-bottom: 6px;
        background-image: url("../../../../../assets/images/badge/badge-td-specialvalue@3x.png");
        background-position: center;
        background-size: contain;
      }

      .freeShipping {
        display: block;
        .size(@w: 240px, @h: 48px);
        margin-bottom: 6px;
        background-image: url("../../../../../assets/images/badge/badge-td-freesh@3x.png");
        background-position: center;
        background-size: contain;
      }
    }

    // bottom
    > div:nth-child(2) {
      .flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);

      > h3 {
        position: relative;
        overflow: hidden;
        width: 540px;
        margin-bottom: 18px;
        font-weight: bold;
        font-size: 30px;
        .elip(@clamp:2);
        word-break: break-all;
        color: @COLOR_GRAY06;
      }

      > p {
        .flex(@justifyCenter: flex-start);
        font-weight: bold;
        font-size: 46px;
        color: @PRIMARY_COLOR_RED;

        > span {
          margin-left: 6px;
          font-weight: normal;
          font-size: 24px;
          color: #7f7f7f;
          text-decoration: line-through;
        }
      }
    }
  }

  // sale percentage area (right)
  > div:nth-child(3) {
    .flex(@direction: column, @alignCenter: flex-end);
    flex-grow: 1;
    padding-right: 48px;

    > span:nth-child(1) {
      .flex();
      .size(@w: 174px, @h: 90px);
      margin-bottom: 6px;
      background-color: #f40000;
      border-radius: 44px;
      font-weight: bold;
      font-size: 54px;
      color: @COLOR_WHITE;
    }

    > span:nth-child(2) {
      .flex();
      .size(@w: 174px, @h: 72px);
      font-weight: bold;
      font-size: 60px;
    }
  }

  /* focused */
  &:focus {
    &::after {
      .focused(@boxShadow: 22px, @borderRadius: 12px);
    }
  }
}
