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

.container {
  /* normal */
  position: relative;
  z-index: 10;
  .size(@w: 1002px, @h: 564px);
  margin-right: 18px;
  border-radius: 12px;
  overflow: hidden;

  // image(thumbnail) area
  > img {
    width: 100%;
  }

  // contents area
  > div:nth-child(2) {
    .position(@position: absolute, @top: 0, @right: 0, @left: 0);
    .flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
    .size(@w: 100%, @h: 100%);
    background-image: linear-gradient(to top, transparent 55%, @COLOR_BLACK);

    // top part (live info)
    > div:nth-child(1) {
      .flex(@justifyCenter: flex-start);
      gap: 12px;
      width: 100%;
      padding: 18px;
      color: @COLOR_WHITE;

      img {
        .size(@w: 108px, @h: 48px);
      }

      div {
        h3 {
          .font(@fontFamily: @baseFontBold, @fontSize: 30px);
          .elip(@clamp:1);
          word-break: break-all;
        }

        time {
          .font(@fontFamily: @baseFont, @fontSize: 24px);
        }
      }
    }

    // bottom part (warning message)
    > div:nth-child(2) {
      .flex(@justifyCenter: flex-start);
      gap: 12px;
      padding: 6px 18px 18px;
      .size(@w: 100%, @h: 54px);
      background-color: rgba(0, 0, 0, 0.9);
      .font(@fontFamily: @baseFont, @fontSize: 20px);
      color: @COLOR_GRAY04;

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

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

.callToOrder {
  bottom: 64px;
  left: 18px;
}
