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

/* liveHorizontal */
.liveHorizontal {
  display: flex;
  .size(@w: 600px, @h: 236px);
  padding: 18px;
  border-radius: 12px;
  border: solid 1px @COLOR_GRAY02;
  background-color: @COLOR_WHITE;

  &.vodVideoVertical {
    .size(@w: 540px, @h: 176px);
  }

  &.liveVideoVertical {
    .size(@w: 540px, @h: 236px);
  }
  .imageWrap {
    position: relative;
    .size(@w: 200px, @h: 200px);
    border: solid 1px #f0f0f0;
    margin-right: 20px;
    flex: 1 0 auto;
    color: @COLOR_WHITE;
    display: flex;
    justify-content: center;
    align-items: center;
    background: @COLOR_WHITE;

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

    // sold out
    > div {
      .position(@position: absolute, @top: 0, @right: 0);
      .flex();
      .size(@w: 200px, @h: 200px);
      background-color: rgba(26, 26, 26, 0.6);
      font-weight: bold;
      font-size: 36px;
    }
  }

  .descWrap {
    .flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
    width: 404px;
    padding: 12px 0;

    .patnerWrap {
      display: flex;
      margin-bottom: 7px;
      > img {
        .size(@w: auto , @h: 42px);
        margin-right: 11px;
      }

      > h3 {
        font-size: 30px;
        color: #767676;
        font-weight: 600;
        margin-top: 5px;
      }
    }
    > h3 {
      font-weight: bold;
      font-size: 24px;
      color: @COLOR_GRAY06;
      .elip(@clamp:2);
      word-break: break-all;
      overflow: hidden;
      margin-bottom: auto;
    }

    .progressBarWrap {
      .progressBar {
        .size(@w: 344px , @h: 8px);
        position: relative;
        background-color: #e7e7e7;

        .gauge {
          max-width: 344px;
          position: absolute;
          background-color: #808080;
          height: 8px;

          &.focused {
            background-color: #c70850;
          }
        }
      }

      &.videoVerticalProgress {
        .size(@w: 284px , @h: 8px);

        > div {
          max-width: 284px;
        }
      }
    }
  }

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

// featuredHorizontal
.featuredHorizontal {
  display: flex;
  .size(@w: 100%, @h: 176px);
  padding: 18px;
  border-radius: 12px;
  border: solid 1px @COLOR_GRAY02;
  background-color: @COLOR_WHITE;

  &.videoVertical {
    .size(@w: 540px, @h: 176px);
  }

  .imageWrap {
    position: relative;
    .size(@w: 248px, @h: 140px);
    border: solid 1px #f0f0f0;
    margin-right: 20px;
    color: @COLOR_WHITE;
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: @COLOR_WHITE;

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

    .nowPlay {
      .size(@w: 125px, @h:24px);
      background-color: rgba(0, 0, 0, 0.6);
      position: absolute;
      bottom: 1px;
      right: 1px;
      top: auto;

      > h3 {
        font-size: 18px;
        font-weight: 600;
      }
    }

    // sold out
    > div {
      .position(@position: absolute, @top: 0, @right: 0);
      .flex();
      .size(@w: 200px, @h: 200px);
      background-color: rgba(26, 26, 26, 0.6);
      font-weight: bold;
      font-size: 36px;
    }
  }

  .descWrap {
    .flex(@direction: column, @justifyCenter: space-between, @alignCenter: flex-start);
    width: 404px;
    padding: 12px 0;

    .patnerWrap {
      display: flex;
      margin-bottom: 7px;
      > img {
        .size(@w: auto , @h: 42px);
        margin-right: 11px;
      }

      > h3 {
        font-size: 30px;
        color: #767676;
        font-weight: 600;
        margin-top: 5px;
      }
    }
    > h3 {
      font-weight: bold;
      font-size: 24px;
      color: @COLOR_GRAY06;
      .elip(@clamp:2);
      word-break: break-all;
      overflow: hidden;
      margin-bottom: auto;
    }
  }

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