@import '@/styles/variables.less';

.material-video-card {
  margin-top: 24px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  background-color: #FFFFFF;
  border-radius: 16px;

  &__cover {
    position: relative;
  }

  &__cover__image,
  &__cover__placeholder {
    width: 150px;
    height: 200px;
    border-radius: 16px;
  }

  &__cover__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F7F7F7;
  }

  &__cover__placeholder__image {
    width: 38px;
    height: 38px;
  }

  &__cover__preview-video {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate3d(50%, -50%, 0);
  }

  &__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin-left: 24px;
  }

  &__info__title {
    width: 100%;
    padding-bottom: 24px;
    border-bottom: 1px solid #E0E0E0;
  }

  &__info__title__input {
    font-size: 32px;
    color: @blColor;
  }

  &__info__title__placeholder {
    font-size: 32px;
    color: #CCCCCC;
  }

  &__info__operate {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 28px;
    line-height: 32px;
    font-weight: 400;
    justify-content: space-between;
  }

  &__info__operate__checkbox {
    --checkbox-label-color: @blColor;
    --checkbox-checked-icon-border-color: @blHighlightColor;
    --checkbox-checked-icon-background-color: @blHighlightColor;
  }

  &__info__operate__delete {
    color: @blHighlightColor;
    margin-right: 8px;
  }

  &__info__temp-tips {
    font-size: 28px;
    line-height: 50px;
    font-weight: 400;
    color: @blColorG1;
  }
}