.index-picture-root {
  @include box(100%, 100%);
  @include flex(row, flex-start, center);

  // 文档
  .doc-container {
    @include flex(column, flex-start, center);
    height: 100%;
    font-weight: 200;
    transition: height 0.1s;
    left: 0;
    top: 0;

    .doc-tree-menu-container {
      @include box(100%, calc(100% - 239px));
    }

    .doc-upload {
      @include box(100%, 239px);
      border-top: 1px solid var(--el-border-color);
    }
  }

  .picture-container {
    height: 100%;
    border-left: 1px solid var(--el-border-color);
    background-color: #ffffff00;
    position: relative;

    .tip {
      @include font(12px, 300);
      padding-top: 8px;
      color: var(--bl-text-color-light);
      position: absolute;
      left: 10px;
      bottom: 35px;
      cursor: pointer;
      &:hover {
        color: var(--el-color-primary);
      }
    }

    .star {
      @include flex(row, center, flex-end);
      height: 100%;
      color: rgb(206, 175, 0);

      .iconbl {
        padding: 5px;
        font-size: 30px;
        text-shadow: var(--bl-text-shadow);
        transition: color 0.3s;
        cursor: pointer;
      }
    }

    .bl-star-line {
      &:hover {
        color: rgb(255, 217, 0) !important;
      }
    }

    .bl-star-fill {
      color: rgb(237, 204, 11);

      &:hover {
        color: rgb(255, 217, 0) !important;
      }
    }

    // 图片列表的控制按钮
    .picutre-workbench {
      @include flex(row, space-between, center);
      @include themeShadow(0 2px 6px #d3d3d3, 0 1px 6px 1px #0e0e0e);
      width: calc(100% - 20px);
      margin: 5px 10px 10px 10px;
      padding: 0px 10px;
      border-radius: 5px;
      transition: height 0.1s;
      overflow-y: hidden;
      overflow-x: auto;

      &::-webkit-scrollbar {
        height: 3px;
      }

      .workbenchs {
        @include flex(column, center, center);
        height: 100%;
      }

      .workbench-level1 {
        @include flex(row, flex-start, flex-end);
        width: 100%;
        height: 50px;
        padding-bottom: 5px;
      }

      .workbench-level2 {
        @include flex(row, flex-start, center);
        width: 100%;
        transition:
          height 0.1s,
          opacity 0.1s;
      }

      .btn-wrapper {
        margin-left: 15px;
      }

      .radio {
        min-width: 70px;
      }

      .btn-wrapper,
      .statistic {
        @include themeColor(#a7a7a7, #6d6d6d);

        & > div {
          font-size: 11px;
          text-align: center;
        }

        .bl-admonish-line {
          font-size: 12px;
          margin-left: 3px;
        }
      }

      .statistic {
        height: 100%;
        width: max-content;
      }
    }

    .picutre-workbench-child {
      transition: all 0.1s ease;
      padding-left: 10px;
      font-size: 12px;
    }

    .picture-card-container {
      @include flex(row, flex-start, flex-start);
      width: 100%;
      align-content: flex-start;
      flex-wrap: wrap;
      padding: 10px 20px;
      overflow-y: scroll;

      .picture-card {
        @include themeShadow(3px 3px 6px 1px #d3d3d3, 1px 3px 6px 1px #0e0e0e);
        @include flex(column, flex-start, center);
        position: relative;
        border-radius: 5px;
        transition:
          height 0.3s,
          width 0.3s,
          box-shadow 0.3s;
        overflow: hidden;

        &:hover {
          @include themeShadow(3px 3px 10px 1px #b0b0b0, 3px 3px 10px 1px #000);

          .picuter-card-workbench {
            opacity: 1;
          }
        }

        .picture-card-check {
          position: absolute;
          height: auto;
          right: 10px;
          top: 10px;

          :deep(.el-checkbox__inner) {
            height: 20px;
            width: 20px;
            &::after {
              border-width: 2px;
              height: 13px;
              left: 7px;
              top: 0;
            }
          }
        }

        .other-file {
          @include flex(column, center, center);
          @include box(100%, 100%);
          background-color: var(--bl-bg-color);
          color: var(--bl-text-color-light);

          .other-filename {
            @include ellipsis();
            text-align: center;
            width: 100%;
            font-size: 12px;
          }

          .other-suffix {
            @include font(23px, 300);
            white-space: pre;
          }
        }

        .img-wrapper {
          @include box(100%, 100%);
          @include flex(row, center, center);
          cursor: pointer;
        }

        img {
          @include box(100%, 100%);
          @include themeBrightness();
          object-fit: cover;
        }

        .img-error {
        }

        .img-deleted {
          @include flex(row, center, center);
          color: var(--el-color-primary-light-7);
          height: 100%;
        }

        // 图片卡片的控制按钮
        .picuter-card-workbench {
          @include flex(row, space-around, flex-start);
          @include box(100%, 50px);
          position: absolute;
          color: #ffffff;
          background-color: var(--el-color-primary-light-3);
          bottom: 0;
          opacity: 0;
          transition: 0.3s;
          z-index: 3;

          .item {
            @include box(25%, 100%);
            @include flex(row, center, center);
            cursor: pointer;
            transition: 0.3s;

            &:hover {
              background-color: var(--el-color-primary);
              width: 30%;
            }
          }
        }
      }

      .picutre-card-large {
        @include box(250px, 300px);
        margin: 20px;

        .picuter-card-workbench {
          @include box(100%, 50px);

          .iconbl {
            font-size: 27px;
          }
        }

        .iconbl {
          font-size: 27px;
        }
      }

      .picutre-card-mini {
        @include box(130px, 180px);
        margin: 10px;

        .picuter-card-workbench {
          @include box(100%, 30px);
        }
      }

      .picuter-card-next {
        @include box(100%, 50px);
        text-align: center;
      }
    }

    .picture-status {
      @include flex(row, space-between, center);
      @include box(100%, 28px);
      @include font(10px, 500);
      position: absolute;
      bottom: 0;
      color: var(--bl-editor-color);
      border-top: 1px solid var(--el-border-color);
      background-color: var(--bl-editor-gutters-bg-color);

      .status-item-container {
        height: 100%;
        white-space: nowrap;
        overflow-x: hidden;

        & > div {
          height: 100%;
          padding: 0 5px;
          cursor: pointer;

          .iconbl {
            padding-right: 4px;
          }

          &:hover {
            background-color: var(--bl-editor-bg-color);
          }
        }
      }

      .tag-root {
        cursor: pointer;
      }

      div {
        @include flex(row, flex-start, center);
      }
    }
  }
}
