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

/* horizontal type */
.horizontal {
  /* normal */
  display: flex;
  .size(@w: 660px, @h: 236px);
  padding: 18px;
  border-radius: 12px;
  border: solid 1px @COLOR_GRAY02;
  background-color: @COLOR_WHITE;

  // left contents (image contetns)
  > div:nth-child(1) {
    position: relative;
    margin-right: 20px;
    color: @COLOR_WHITE;

    img {
      .size(@w: 200px, @h: 200px);
      object-fit: cover;
      border: solid 1px #f0f0f0;
    }

    // discount rate
    span {
      .position(@position: absolute, @right: 12px, @bottom: 12px);
      .size(@w: 60px, @h: 60px);
      border-radius: 60px;
      background-color: @PRIMARY_COLOR_RED;
      .font(@fontFamily: "ArialBold", @fontSize:26px);
      text-align: center;
      line-height: 60px;
    }

    // sold out
    div {
      .position(@position: absolute, @top: 0, @right: 0);
      .flex();
      .size(@w: 200px, @h: 200px);
      background-color: rgba(26, 26, 26, 0.6);
      .font(@fontFamily: @baseFontBold, @fontSize: 36px);
    }
  }

  // right contents
  > div:nth-child(2) {
    .flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
    flex-grow: 1;
    padding: 12px 0;

    h3 {
      .font(@fontFamily: @baseFontBold, @fontSize: 24px);
      color: @COLOR_GRAY06;
      .elip(@clamp:2);
      word-break: break-all;
      overflow: hidden;
    }

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

      span {
        margin-left: 5px;
        .font(@fontFamily: @baseFont, @fontSize: 18px);
        color: @COLOR_GRAY04;
        text-decoration: line-through;
      }
    }
  }

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

/* vertical type (Thumbnail) */
.vertical {
  /* normal */
  position: relative;
  display: flex;
  flex-direction: column;
  .size(@w: 324px, @h: 438px);
  padding: 18px;
  border-radius: 12px;
  border: solid 1px @COLOR_GRAY02;
  background-color: @COLOR_WHITE;

  // top contents (image contetns)
  > div:nth-child(1) {
    position: relative;
    .size(@w: 288px, @h: 288px);
    margin-bottom: 12px;
    color: @COLOR_WHITE;

    img {
      .size(@w: 288px, @h: 288px);
      object-fit: contain;
      border: solid 1px #f0f0f0;
    }

    // discount rate
    span {
      .position(@position: absolute, @right: 12px, @bottom: 12px);
      .size(@w: 60px, @h: 60px);
      border-radius: 60px;
      background-color: @PRIMARY_COLOR_RED;
      .font(@fontFamily: "ArialBold", @fontSize:26px);
      text-align: center;
      line-height: 60px;
    }

    // sold out
    > div:nth-child(3) {
      .position(@position: absolute, @top: 0, @right: 0);
      .flex();
      .size(@w: 288px, @h: 288px);
      background-color: rgba(26, 26, 26, 0.6);
      .font(@fontFamily: @baseFontBold, @fontSize: 36px);
    }
  }

  // bottom contents
  > div:nth-child(2) {
    .flex(@direction: column, @alignCenter: flex-start);
    flex-grow: 1;

    h3 {
      margin-bottom: 6px;
      .font(@fontFamily: @baseFontBold, @fontSize: 24px);
      color: @COLOR_GRAY06;
      .elip(@clamp:2);
      word-break: break-all;
      overflow: hidden;
    }

    p {
      .flex(@justifyCenter: flex-start);
      .font(@fontFamily: @baseFontBold, @fontSize: 30px);
      color: @PRIMARY_COLOR_RED;
      letter-spacing: -1px;
      span {
        margin-left: 5px;
        .font(@fontFamily: @baseFont, @fontSize: 18px);
        color: @COLOR_GRAY04;
        text-decoration: line-through;
      }
    }
  }

  // best seller
  > div:nth-child(3) {
    .position(@position: absolute, @top: -1px, @left: 18px);
    .flex(@direction: column, @justifyCenter: space-between);
    .size(@w: 79px, @h: 102px);
    padding: 12px 12px 18px;
    background-color: @COLOR_GRAY07;
    .font(@fontFamily: @robotoFontBold, @fontSize: 24px);
    color: @COLOR_WHITE;
    border-bottom-left-radius: 79px;
    border-bottom-right-radius: 79px;

    span {
      .font(@fontFamily: @arialFontBold, @fontSize: 42px);
      font-size: 42px;
    }
  }

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

    // best seller
    div:nth-child(3) {
      background-color: @PRIMARY_COLOR_RED;
    }
  }
}