.bl-preview-toc-block,
.bl-preview-toc-absolute {
  padding: 10px;
  transition:
    width 0.2s,
    height 0.2s;
}

// 块的目录, 用在新窗口中
.bl-preview-toc-block {
  @include box(400px, 100%);
  color: #5e5e5e;
  border-left: 1px solid var(--bl-preview-toc-border-color);
  padding-right: 5px;

  .doc-info {
    .doc-name {
      color: #ababab;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-bottom: 10px;
    }
    .doc-subtitle {
      @include flex(row, flex-start, center);
      @include font(12px);
      font-family: 'Jetbrains Mono';
      width: 100%;
      color: #ababab;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      white-space: pre;
      margin-top: 5px;
    }
  }

  .toc-title {
    @include font(25px, 700);
    width: 100%;
    border-top: 1px solid var(--bl-preview-toc-border-color);
    margin-top: 10px;
    padding-top: 8px;
    margin-bottom: 8px;
  }

  .toc-content {
    @include box(100%, calc(100% - 130px));
    @include font(14px);
    padding-bottom: 20px;
    padding-left: 5px;
    overflow-y: scroll;

    .toc-item {
      width: auto;
      padding: 4px 0;
      color: #5e5e5e;
      position: relative;
      cursor: pointer;

      &:hover {
        color: var(--el-color-primary);
      }

      &::after {
        content: '';
        position: absolute;
        top: 20%;
        left: -5px;
        width: 2px;
        height: 60%;
        background: var(--el-color-primary-light-4);
        border-radius: 10px;
        opacity: 0;
        transition: opacity 0.1s;
      }

      &:hover::after {
        opacity: 1;
      }
    }

    .toc-2 {
      margin-left: 10px;
    }

    .toc-3 {
      margin-left: 20px;
    }

    .toc-4 {
      margin-left: 30px;
    }

    .toc-5 {
      margin-left: 40px;
    }

    .toc-6 {
      margin-left: 50px;
    }
  }
}

@media screen and (max-height: 800px) {
  .bl-preview-toc-absolute {
    max-height: 500px !important;
    background-color: red;

    .toc-content {
      max-height: calc(500px - 150px - 60px - 20px) !important;
    }
  }
}

// 浮动的目录, 用在编辑器中
.bl-preview-toc-absolute {
  @include font(12px);
  @include themeShadow(2px 4px 7px 2px rgba(49, 49, 49, 0.3), 2px 4px 7px 2px rgb(28, 28, 28));
  position: absolute;
  top: 50px;
  right: 50px;
  padding-top: 0px;
  background-color: #4d4d4dbd;
  border-radius: 10px;
  z-index: 2002;
  max-height: 700px;
  overflow: hidden;
  user-select: none;

  .toc-title {
    @include box(100%, 40px);
    @include font(15px, 700);
    @include themeColor(#ffffff, #cdcdcd);
    padding-top: 10px;
    cursor: move;
  }

  .toc-content {
    @include themeColor(#e2e2e2, #bcbcbc);
    overflow-y: scroll;
    width: 100%;
    max-height: calc(700px - 150px - 60px - 20px);

    .toc-1 {
      @include themeBorder(2px, #a3a3a3, #a3a3a3, 'top');
    }

    .toc-1,
    .toc-2,
    .toc-3,
    .toc-4,
    .toc-5,
    .toc-6 {
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      white-space: pre;

      &:hover {
        font-weight: bold;
      }
    }

    .toc-1 {
      margin-top: 5px;
      padding-top: 5px;

      &:first-child {
        margin: 0;
        padding: 0;
        border: 0;
      }
    }

    .toc-2 {
      padding-left: 10px;
    }

    .toc-3 {
      padding-left: 20px;
    }

    .toc-4 {
      padding-left: 30px;
    }

    .toc-5 {
      padding-left: 40px;
    }

    .toc-6 {
      padding-left: 50px;
    }
  }

  .img-title {
    @include box(100%, 20px);
    @include font(15px, 700);
    @include themeColor(#ffffff, #cdcdcd);
    @include themeBorder(2px, #a3a3a3, #a3a3a3, 'top');
    margin-top: 20px;
    height: 40px;
    padding-top: 10px;
    cursor: auto;

    .iconbl {
      cursor: pointer;

      &:hover {
        color: var(--el-color-primary-light-1);
      }

      &:active {
        color: var(--el-color-primary-light-5);
      }
    }
  }

  .img-content {
    @include box(100%, auto);
    @include flex(row, flex-start, flex-start);
    max-height: 130px;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow-y: scroll;

    .img-wrapper {
      @include box(50px, 50px);
      background-color: aliceblue;
      border-radius: 4px;
      margin: 3px;
      color: #a7a7a7;
      filter: brightness(90%);
      cursor: pointer;
      overflow: hidden;

      img {
        @include box(50px, 50px);
        object-fit: cover;
      }

      &:hover {
        filter: brightness(100%);
      }
    }
  }
}

.bl-preview-toc-absolute.is-expand-open {
  @include box(310px, auto);
}

.bl-preview-toc-absolute.is-expand-close {
  @include box(50px, 40px);
}
