:host {
  /**
    * @prop --tree-text-color: [DEPRECATED] tree text color
    */
  --tree-text-color: var(--color-text-primary);
  /**
    * @prop --tree-background-color: [DEPRECATED] tree background color
    */
  --tree-background-color: var(--color-background-surface-default);
  /**
  * @prop --tree-border-color: [DEPRECATED] tree color
  */
  --tree-border-color: var(--color-border-interactive-muted);
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: 0;
  font-family: var(--font-body-1-font-family);
  font-size: var(--font-body-1-font-size);
  font-weight: var(--font-body-1-font-weight);
  letter-spacing: var(--font-body-1-letter-spacing);
  color: var(--tree-text-color);
  border-bottom: 1px solid var(--color-border-interactive-muted);
  background-color: var(--tree-background-color);
  user-select: none;
  width: 100%;
}

:host([hidden]) {
  display: none;
}