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

.boxWrap {
  .size(@w: 315px, @h: 265px);
  position: relative;
  border-radius: 12px;
  overflow: hidden;

  .itemContainer {
    .size(@w: 100%, @h: 100%);
    background-color: @COLOR_GRAY01;
    display: flex;
    flex-direction: column;

    .imgWrap {
      .size(@w: 100%, @h:177px);
      background-size: cover;
      position: relative;
      text-align: center;
      background-color: @COLOR_WHITE;

      .soldOutOverlay {
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.3);

        .soldOutText {
          color: @COLOR_WHITE;
          .font(@fontFamily: @arialFontBold, @fontSize: 36px);
          font-weight: bold;
        }
      }

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

    .titleWrap {
      .size(@w: 100%, @h: calc(100% - 177px));
      padding: 7px 14px;

      .title {
        color: @COLOR_GRAY06;
        .font(@fontFamily: @arialFont, @fontSize: 19px);
        .elip(@clamp: 1);
      }
    }

    &:focus {
      background-color: @BG_COLOR_05;

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

  .checkboxOverlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(26, 26, 26, 0.5);
    width: 100%;
    height: 100%;
    z-index: 10;

    .checkbox {
      position: absolute;
      top: 16px;
      left: 16px;
    }

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