/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
:host {
  /**
   * @prop --tree-node-width: Tree Node height.
   * @prop --tree-node-height: Tree Node height.
   * @prop --tree-node-gap: Gap between child nodes in px.

   * @prop --tree-children-offset: Offset of the child nodes in px.
   * @prop --tree-children-padding-left: Left padding for the child nodes in px.
   */
  --tree-node-width: 300px;
  --tree-node-height: 40px;
  --tree-node-gap: var(--kv-spacing-2x, 8px);
  --tree-children-offset: var(--kv-spacing-3x, 12px);
  --tree-children-padding-left: var(--kv-spacing-2x, 8px);
}
:host .container {
  width: var(--tree-node-width);
}
:host kv-tree-item {
  --node-width: var(--tree-node-width);
  --node-height: var(--tree-node-height);
  --node-gap: var(--tree-node-gap);
  --children-offset: var(--tree-children-offset);
  --children-padding-left: var(--tree-children-padding-left);
}
:host > kv-tree-item:not(:first-child)::before {
  content: "";
  display: block;
  height: var(--tree-node-gap);
}

:host {
  --tree-connector-lines-color: var(--kv-neutral-5, #707070);
}
:host kv-tree-item {
  --connector-lines-color: var(--tree-connector-lines-color);
}