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


.button {
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.button-secondary {
  color: var(--neutral-800);
  background-color: var(--neutral-300);
}

.button-secondary:hover {
  color: var(--neutral-900);
}

.button-secondary:hover:enabled {
  box-shadow: 0 2px 2px rgb(0 0 0 / 20%);
}

.button-secondary:disabled {
  opacity: 0.8;
}

.button-secondary:hover:disabled {
  cursor: not-allowed;
}


:host {
  /**
   * @prop --scene-tree-toolbar-separator: A CSS border value that specifies the
   * border between scene tree toolbars.
   */
  --scene-tree-toolbar-separator: 1px solid var(--neutral-300);

  /**
   * @prop --scene-tree-default-font-family: The default font family to use for displaying
   * text within a <vertex-scene-tree>. Defaults to `unset`.
   */
  --scene-tree-default-font-family: unset;

  /**
   * @prop --scene-tree-default-font-size: The default font size to use for displaying
   * text within a <vertex-scene-tree>. Defaults to `unset`.
   */
  --scene-tree-default-font-size: unset;

  /**
   * @prop --scene-tree-default-font-color: The default font color to use for displaying
   * text within a <vertex-scene-tree>. Defaults to `unset`.
   */
  --scene-tree-default-font-color: unset;

  /**
   * @prop --scene-tree-secondary-font-color: The secondary font color to use for displaying
   * secondary text within a <vertex-scene-tree>. Defaults to `unset`.
   */
  --scene-tree-secondary-font-color: unset;

  /**
   * @prop --scene-tree-selected-row-background-color: The background color to use when
   * displaying selected rows. This value always takes precedence if the row is selected.
   * Defaults to `unset`.
   */
  --scene-tree-selected-row-background-color: unset;

  /**
   * @prop --scene-tree-hovered-row-background-color: The background color to use when
   * displaying hovered rows. This value takes precedence only if the row is not selected.
   * Defaults to `unset`.
   */
   --scene-tree-hovered-row-background-color: unset;

  /**
   * @prop --scene-tree-row-background-color: The default background color to use for displaying
   * rows within a <vertex-scene-tree>. Defaults to `unset`, and will be overridden
   * by any depth specific background configuration.
   */
   --scene-tree-row-background-color: unset;

  /**
   * @prop --scene-tree-row-background-color-depth-n: The background color to use for n-depth
   * rows, where `n` is replaced with the desired depth. Defaults to `unset` for all
   * depths.
   *
   * @example
   * The following definition will cause all rows representing items at a depth of 1
   * to display with a red background, leaving all other depths unchanged.
   * 
   * --scene-tree-row-background-color-depth-1: #ff0000
   */
  --scene-tree-row-background-color-depth-n: unset;


  /**
  * @prop --scene-tree-overlay-z-index: A CSS z-index value that will
  * set the z-index of the tree overlays. Defaults to 3000.
  */
  --scene-tree-overlay-z-index: 3000;

  width: 300px;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  display: flex;
  flex-direction: column;
  position: relative;
}

.rows-scroll {
  position: relative;
  height: var(--scene-tree-row-height, 0);
  flex-grow: 1;
}

.rows {
  position: relative;
}

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

.row:hover {
  background-color: var(--scene-tree-row-hover-color);
}

.row.is-selected {
  background-color: var(--scene-tree-row-selected-color);
}

.expand-toggle {
  cursor: pointer;
  width: 16px;
}

.row-text {
  margin-left: 0.25rem;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.visibility-btn {
  display: flex;
  align-items: center;
  visibility: hidden;
  padding: 4px;
}

.visibility-btn.is-hidden {
  visibility: visible;
}

.row:hover .visibility-btn {
  visibility: visible;
}

.error,
.empty-results {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.875rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
  justify-content: center;
  background-color: white;
  z-index: var(--scene-tree-overlay-z-index);
}

.error-section {
  margin-top: 1rem;
}

.error-message {
  text-align: center;
}

.search-toolbar,
slot[name='header']::slotted(*) {
  border-bottom: var(--scene-tree-toolbar-separator);
}

slot[name='footer']::slotted(:not(:last-child)) {
  border-top: var(--scene-tree-toolbar-separator);
}

.header {
  display: flex;
  flex-direction: column;
}

.footer {
  display: flex;
  flex-direction: column;
}

.loading {
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}