:host {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 0.825rem;

  /**
    * @prop --scene-tree-table-row-padding: CSS lengths that specifies the amount of
    * padding between the row's border and content.
    */
    --scene-tree-table-row-padding: 2px 0px;

  /**
    * @prop --scene-tree-table-column-gap: CSS length that specifies the amount of
    * padding between columns in the table.
    */
    --scene-tree-table-column-gap: 0.5rem;

  /**
    * @prop --scene-tree-table-column-resize-cursor: A CSS cursor value that will
    * be displayed when resizing a column. Defaults to `col-resize`.
    */
    --scene-tree-table-column-resize-cursor: col-resize;
}

.header {
  position: relative;
  display: grid;
  width: 100%;
  border-bottom: var(--scene-tree-toolbar-separator);
}

.table {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.resize-overlay {
  position: absolute;
  top: 0;
  cursor: var(--scene-tree-table-column-resize-cursor);
  z-index: 1000;
  width: 100%;
  height: 100%;
}

.divider-overlay {
  position: absolute;
  top: 0;
  display: grid;
  pointer-events: none;
  z-index: 2000;
  width: 100%;
  height: 100%;
}