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

.material-card {
  padding: 32px 24px;
  border-radius: 16px;
  background: #FFFFFF;
  box-sizing: border-box;

  &__header {
    .flex-row();
    justify-content: space-between;

    &__left,
    &__right {
      .flex-row();
    }

    &__title {
      font-size: 32px;
      line-height: 40px;
      font-weight: 400;
      color: @blColor;
    }

    &__progress {
      font-size: 28px;
      line-height: 32px;
      font-weight: 400;
      color: @blHighlightColor;
      margin-left: 8px;
    }

    &__status {
      font-size: 28px;
      line-height: 32px;
      font-weight: 400;
      color: @blColorG1;
      margin-right: 4px;
    }

    &__icon {
      .flex-row();
      height: 48px;
      font-size: 32px;
      line-height: 48px;
      color: #969799;
    }
  }

  &__body {
    width: 100%;
    height: 156px;
    margin-top: 24px;
    .flex-column();
    justify-content: center;
  }

  &__placeholder {
    height: 100%;
    .flex-column();
    justify-content: center;

    &__tips {
      font-size: 28px;
      line-height: 32px;
      font-weight: 400;
      color: @blColorG1;
    }

    &__create-button {
      .button();
      font-size: 28px;
      line-height: 32px;
      font-weight: 400;
      color: @blHighlightColor;
      margin-top: 22px;
      background: transparent;
      border-radius: 0;
    }
  }

  &__scroll-view {
    position: relative;
    width: 100%;
    height: 100%;
    .flex-row();

    &::-webkit-scrollbar {
      display: none;
    }

    &::after {
      content: '';
      position: absolute;
      right: 0;
      width: 102px;
      height: 100%;
      background: linear-gradient(91.41deg, rgba(255, 255, 255, 0) 1.86%, #FFFFFF 99.47%);
    }
  }

  &__cover-list {
    height: 100%;
    .flex-row();
  }

  &__cover-image {
    width: 120px;
    height: 100%;
    margin-right: 24px;
    // 不知道为啥高度不对，可能 scroll-view 默认底部是滚动条高度？
    margin-top: 38px;
    border-radius: 8px;
  }

}