.table-page {
  grid-template-columns 1fr
  grid-template-rows: minmax(74px, var(--search-form-height)) minmax(277px, var(--data-list-height));
  grid-auto-rows: minmax(0, auto);
  gap 10px

  &.folder {
    grid-template-rows: 0 minmax(0, 3fr);
    gap: 0;

    .search-form {
      padding 0
      border-width 0
      height 0
    }
  }

  .search-form-wrapper {
    border: 1px solid var(--el-border-color-light);
    padding: 20px;
    border-radius: 8px;
    background-color: white;
    height 100%
    width 100%;
    box-sizing: border-box;

    & > div {
      max-height 168px
      width 100%;
    }

    .search-form {
      display grid
      grid-template-columns repeat(auto-fit, minmax(var(--item-min-width), 1fr))
      row-gap var(--rgap);
      column-gap var(--cgap);

      :global(.el-form-item) {
        margin 0
      }

      :global(.el-form-item).form-action-btn {
        grid-column: 1 / -1;

        .el-form-item__content {
          justify-content end
        }
      }
    }
  }

  .data-list {
    box-sizing: border-box;
    display grid
    grid-template-columns 1fr
    grid-template-rows 32px minmax(0, 1fr) 50px
    border: 1px solid var(--el-border-color-light);
    padding: 15px 20px 20px 15px;
    border-radius: 8px;
    background-color: white;
    height 100%
    width 100%;
    gap 20px

    .tool-bar {
      display: grid;
      grid-template-columns: 1fr auto;
      box-sizing: border-box;

      .tool-bar-left {
        //flex 1
      }

      .tool-bar-right {
        display grid
        justify-self end
        grid-template-columns: auto calc(var(--btn-count) * 42px + 64px);
        grid-template-rows: 32px;
        gap 10px

        & > div:first-child {
          justify-self: end;
          //width 100%;
          //width calc(var(--form-item-count) * var(--form-item-width) * 1px + var(--form-item-count) * 10px) ;

          /*:global(.el-scrollbar__wrap) {
            width 100%;
          }

          :global(.el-scrollbar__view) {
            width 100%;
          }*/

          :global(.el-form) {
            //width 100%;
            display: grid;
            grid-template-columns: repeat(var(--form-item-count), var(--form-item-width));
            gap 10px

            :global(.el-form-item) {
              margin: 0;
            }
          }
        }

        & > div:last-child {
          display: flex;
          gap 10px
          justify-content: flex-end;
          min-width 65px
          max-width 150px

          :global(.el-button--default) {
            width 32px
            color #4D5875
            background-color #F1F4F4
            border-color #F1F4F4
            margin 0

            &:hover {
              color var(--el-color-primary)
              background-color #E6EAEB;
              border-color #E6EAEB;
            }
          }

          :global(.el-dropdown) {
            flex-shrink 0
          }

          :global(.el-button--default).filter-btn-active {
            color var(--el-color-primary)
          }
        }
      }
    }

    :global(.el-pagination) {
      justify-content center

      :global(.btn-next),
      :global(.btn-prev),
      :global(.el-pager) li {
        border-radius: 6px !important;
      }
    }
  }
}
