.extract-preview-table-root {
  width: 100%;
  height: 100%;
  overflow: auto;

  .column-item {
    flex-shrink: 0;
    height: max-content;

    &.disabled {
      .p-th,
      .p-tr {
        color: var(--kw-disabled-color);
      }
    }

    &.dragging {
      cursor: col-resize;

      .p-th {
        cursor: col-resize;
      }

      & + .column-item {
        cursor: col-resize;

        .p-th {
          cursor: col-resize;
        }
      }
    }
  }

  .drag-line {
    position: absolute;
    z-index: 2;
    top: 0;
    right: -0;
    width: 5px;
    height: 100%;
    cursor: col-resize;

    &::after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 12px;
      width: 1px;
      height: 24px;
      background: var(--kw-line-color);
    }
  }

  .p-th {
    position: sticky;
    top: 0;
    height: 48px;
    padding: 0 24px;
    background: #fafafa;
    border-top: 1px solid var(--kw-line-color);
    border-bottom: 1px solid var(--kw-line-color);
    cursor: pointer;

    .th-key {
      flex: 1;
      min-width: 30px;
      font-weight: 600;
    }
  }

  .p-tr {
    min-height: 48px;
    line-height: 24px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--kw-line-color);
  }
}
