.TreeView {
  --tree-view-icon-color: var(--color-content-base-primary);
  --tree-view-item-bg-color: transparent;
  margin: 0;
  padding: 0;
  list-style-type: none;
  inline-size: 100%;
}

  .TreeView_children {
    -webkit-padding-start: 4px;
            padding-inline-start: 4px;
    -webkit-margin-start: 44px;
            margin-inline-start: 44px;
    inline-size: auto;
    -webkit-border-start: 1px solid var(--color-border-base-secondary);
            border-inline-start: 1px solid var(--color-border-base-secondary);
    list-style-type: none;
    transition: max-block-size var(--transition-default);
  }

  .TreeView-TreeItem {
    --tree-view-item-padding: 10px 8px 10px 12px;
    display: flex;
    padding: var(--tree-view-item-padding);
    gap: var(--spacing-2x);
    align-items: center;
    border-radius: var(--border-radius-xs);
    text-decoration: none;
    background-color: var(--tree-view-item-bg-color);

    transition: background-color var(--transition-default),
      box-shadow var(--transition-default);
  }

  .TreeView-TreeItem:focus-visible {
      outline: none;
      box-shadow: inset var(--shadow-outline-focused);
    }

  .TreeView-TreeItem_withMenu {
      --tree-view-item-padding: 8px 8px 8px 12px;
    }

  .TreeView-TreeItem_hovered {
      --tree-view-item-bg-color: var(--color-background-base-main-hover);
      cursor: pointer;
    }

  .TreeView-TreeItem_selected {
      --tree-view-item-bg-color: var(--color-background-base-main-pressed);
    }

  .TreeView-TreeItem_disabled {
      pointer-events: none;
    }

  .TreeView-ItemIcon {
    color: var(--tree-view-icon-color);
  }

  .TreeView-ItemIcon_disabled {
      --tree-view-icon-color: var(--color-content-base-disabled);
    }

  .TreeView-ItemLabel {
    -webkit-margin-end: auto;
            margin-inline-end: auto;
  }