@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.vertical {
  /* normal */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  .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);
    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);
    gap: 6px;
    flex-grow: 1;

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

    p {
      .flex(@justifyCenter: flex-start);
      gap: 5px;
      .font(@fontFamily: @baseFontBold, @fontSize: 30px);
      color: @PRIMARY_COLOR_RED;
      letter-spacing: -1px;
      span {
        .font(@fontFamily: @baseFont, @fontSize: 18px);
        color: @COLOR_GRAY04;
        text-decoration: line-through;
      }
    }
  }
  /* focused */
  &:focus-within,
  &:focus {
    border: solid 1px @PRIMARY_COLOR_RED;
    box-shadow: inset 0 0 0 4px @PRIMARY_COLOR_RED,
      0 0 50px 0 rgba(0, 0, 0, 0.5);

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