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

.card {
  position: relative;
  z-index: 10;
  .size(@w: 1002px, @h: 564px);
  border-radius: 12px;
  background-color: @BG_COLOR_01;

  &.shadow {
    .focusDropShadow();
  }

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

  // &::after {
  //   .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: 10px 10px 0 0;
  //   content: "";
  // }

  .videoThumbnail {
    .position(@position: absolute, @top: 0, @right: 0, @left: 0);
    z-index: -1;
    .flex();
    overflow: hidden;

    &.horizontal {
      > img {
        .size(@w: 1002px, @h: 564px);
        border-radius: 10px;
      }
    }

    &.vertical {
      background-color: @COLOR_BLACK;

      > img {
        .size(@w: 326px, @h: 564px);
        border-radius: 10px;
      }
    }
  }

  .videoInfo {
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 18px 18px 18px 138px;
    color: @COLOR_WHITE;

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

    > h3 {
      position: relative;
      min-height: 42px;
      margin-bottom: 6px;
      font-weight: bold;
      font-size: 30px;
      line-height: 1.27;
      .elip(@clamp:1);
      word-break: break-all;
    }

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

  > .darkGradient {
    .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: 10px 10px 0 0;
  }

  .player {
    .position(@position: absolute, @top: 0, @left: 0);
    height: 564px;

    &.horizontal {
      width: 1002px;
    }

    &.vertical {
      width: 362px;
    }

    &::after {
      .focused(@borderRadius: 12px);
      z-index: 10;
    }
  }
}
