@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/partners/img-partners-banner-td-hor@3x.png");
  background-position: center;
  background-size: contain;

  // image area (left)
  > div:nth-child(1) {
    overflow: hidden;
    margin-right: 30px;
    border-radius: 16px;

    img {
      .size(@w: 558px, @h: 312px);
    }
  }

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

    // product badge icon area (top)
    > div:nth-child(1) {
      .size(@w: inherit, @h: 156px);

      .todaysDealsTag {
        .size(@w: inherit, @h: 112px);

        .specialValue {
          display: block;
          .size(@w: 240px, @h: 48px);
          margin-bottom: 6px;
          background-image: url("../../../../../assets/icon/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/icon/badge/badge-td-freesh@3x.png");
          background-position: center;
          background-size: contain;
        }
      }

      .specialPriceType {
        .flex(@justifyCenter: flex-start);
        overflow: hidden;
        .size(@w: inherit, @h: 42px);
        margin-bottom: 6px;

        .tsv {
          display: inline-block;
          .size(@w: 80px, @h: 42px);
          margin-right: 6px;
          background-image: url("../../../../../assets/icon/badge/badge-tsv@3x.png");
          background-position: center;
          background-size: contain;
        }

        .frees {
          display: inline-block;
          .size(@w: 130px, @h: 42px);
          margin-right: 6px;
          background-image: url("../../../../../assets/icon/badge/badge-frees-h@3x.png");
          background-position: center;
          background-size: contain;
        }

        .bigSale {
          display: inline-block;
          .size(@w: 120px, @h: 42px);
          margin-right: 6px;
          background-image: url("../../../../../assets/icon/badge/badge-bigsale@3x.png");
          background-position: center;
          background-size: contain;
        }

        .shopTimePrice {
          display: inline-block;
          .size(@w: 200px, @h: 42px);
          margin-right: 6px;
          background-image: url("../../../../../assets/icon/badge/badge-shoptimeprice@3x.png");
          background-position: center;
          background-size: contain;
        }

        .coupon {
          display: inline-block;
          .size(@w: 120px, @h: 42px);
          border-radius: 4px;
          background-color: #7a808d;
          .font(@fontFamily: @baseFontBold, @fontSize: 24px);
          text-align: center;
          line-height: 42px;
          color: @COLOR_WHITE;
        }
      }
    }

    // product contents area (bottom)
    > div:nth-child(2) {
      h3 {
        overflow: hidden;
        width: 540px;
        min-height: 80px;
        margin-bottom: 4px;
        .font(@fontFamily: @baseFontBold, @fontSize: 30px);
        .elip(@clamp:2);
        word-break: break-all;
        color: @COLOR_GRAY06;
      }

      p {
        .flex(@justifyCenter: flex-start);
        .font(@fontFamily: @baseFontBold, @fontSize: 46px);
        color: @PRIMARY_COLOR_RED;

        span {
          margin-left: 6px;
          .font(@fontFamily: @baseFont, @fontSize: 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(@fontFamily: @baseFontBold, @fontSize: 54px);
      color: @COLOR_WHITE;
    }

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

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

  /* selected */
}
