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

.card {
  position: relative;
  z-index: 10;
  .size(@w: 1002px, @h: 564px);

  &:focus {
    &::after {
      z-index: 10;
      .focused(@boxShadow:22px, @borderRadius: 12px);
      border: 6px solid @PRIMARY_COLOR_RED;
      top: -4px;
      right: -4px;
      bottom: -4px;
      left: -4px;
    }
  }

  &::before {
    .position(@position: absolute, @top: 0, @right: 0, @left: 0);
    .flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
    .size(@w: 1002px, @h: 564px);
    background-image: linear-gradient(to top, transparent 55%, @COLOR_BLACK);
    border-radius: 12px;
    content: "";
  }

  > figure:nth-child(1) {
    .size(@w: 1002px, @h: 564px);
    .position(@position: absolute, @top: 0, @right: 0, @left: 0);
    z-index: -1;
    .flex();
    overflow: hidden;
    border-radius: 12px;

    &.horizontal {
      > img {
        height: 100%;
        // .size(@w: 100%, @h: 100%);
        border-radius: 12px;
      }
    }

    &.vertical {
      background-color: @COLOR_BLACK;
      z-index: 10;
      > img {
        .size(@w: auto, @h: 564px);
        border-radius: 12px;
      }
    }
  }

  > div:nth-child(2) {
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: @COLOR_WHITE;

    &:focus {
      .focused(@borderRadius: 12px);
      border: 6px solid @PRIMARY_COLOR_RED;
      top: -4px;
      right: -4px;
      bottom: -4px;
      left: -4px;
    }

    &::after {
      .position(@position: absolute, @top: 33px, @left: 18px);
      .size(@w: 108px, @h: 48px);

      background-position: center center;
      background-repeat: no-repeat;
      content: "";
    }

    h3 {
      min-height: 42px;
      margin-bottom: 6px;
      font-weight: bold;
      font-size: 30px;
      line-height: 1.27;
      .elip(@clamp:2);
      padding: 19px 114px 0 18px;
    }

    time {
      height: 30px;
      font-weight: normal;
      font-size: 24px;
      line-height: 1.33;
    }
  }
}

// best seller
.videoDesc {
  height: 100%;

  .rank {
    .position(@position: absolute, @top: -1px, @right: 18px);
    .size(@w:78px,@h:102px);
    background-color: @COLOR_GRAY07;
    font-size: 24px;
    color: @COLOR_WHITE;
    .border-solid(3px,@COLOR_WHITE);
    border-bottom-left-radius: 79px;
    border-bottom-right-radius: 79px;
    margin: 0 auto;
    text-align: center;

    > img {
      .size(@w:36px,@h:36px);
      margin: 6px 0;
      text-align: center;
    }
    > div {
      .font(@fontFamily: @arialFontBold, @fontSize: 42px);
      text-align: center;
    }
  }

  .callBox {
    scale: 0.52 !important;
    bottom: -24px !important;
    left: -39px !important;
  }

  .notice {
    width: 100%;
    height: 54px;
    background: #000000;
    .flex(@justifyCenter:flex-start);
    padding: 6px 18px 18px 18px;
    position: absolute;
    bottom: 0;
    border-radius: 0 0 12px 12px;

    .marquee {
      width: 100%;
      height: 100%;
    }
    img {
      width: 18px;
      height: 18px;
      margin: 10px 12px 0 0;
      object-fit: contain;
    }
    span {
      line-height: normal;
      letter-spacing: normal;
      text-align: left;
      .font(@fontFamily:@baseFont, @fontSize:20px);
      color: @COLOR_GRAY04;
    }
  }
}

.videoModal {
  &::after {
    .focused(@boxShadow:0, @borderRadius: 12px);
    border: 6px solid @PRIMARY_COLOR_RED;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
  }
}
