button {
  border: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0;
}


:host {
  display: flex;
  align-items: center;
  box-sizing: border-box;

  /**
   * @prop --scene-tree-cell-background-hover: A CSS background of a cell when
   * hovered.
   */
   --scene-tree-cell-background-hover: var(--blue-200);

   /**
     * @prop --scene-tree-cell-background-selected: A CSS background color of a
     * cell when selected.
     */
   --scene-tree-cell-background-selected: var(--blue-300);

   /**
     * @prop --scene-tree-cell-text-positioning: A CSS text alignment
     * value that indicates how text should be positioned.
     */
   --scene-tree-cell-text-positioning: left;

   /**
     * @prop --scene-tree-cell-padding: CSS lengths that specifies the amount of
     * padding between the cell's border and content.
     */
   --scene-tree-cell-padding: 0.25rem 0;

   font-size: var(--scene-tree-default-font-size, unset);
   font-family: var(--scene-tree-default-font-family, unset);
   color: var(--scene-tree-default-font-color, #444444);
}

:host([is-hovered]) {
  background: var(--scene-tree-cell-background-hover);
}

:host([is-selected]) {
  background: var(--scene-tree-cell-background-selected);
}

.wrapper {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: var(--scene-tree-cell-padding);
}

.content {
  width: 100%;
  text-align: var(--scene-tree-cell-text-positioning);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.column-spacer {
  width: var(--scene-tree-table-column-gap);
}

.expand-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}

:host([is-leaf]) .expand-btn,
:host([is-end-item]) .expand-btn {
  visibility: hidden;
  cursor: default;
}

.no-shrink {
  flex-shrink: 0;
}

.end-item-btn {
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}

:host(:not([is-end-item])) .end-item-btn {
  visibility: hidden;
  cursor: default;
}

.end-item-icon {
  width: 14px;
  height: 14px;
  fill: var(--scene-tree-secondary-font-color, var(--neutral-600));
}

.visibility-btn,
.isolate-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.icon {
  width: 14px;
  height: 14px;
  fill: var(--scene-tree-default-font-color, currentColor);
}