chrome/browser/resources/bookmarks/folder_node.html

<style include="cr-shared-style shared-style cr-nav-menu-item-style">
  :host {
    display: block;
    --cr-vertical-tab-height: 33px;
  }

  .cr-nav-menu-item {
    color: var(--folder-inactive-color);
    /* Add enough space at the end for the focus outline to not be cropped. */
    margin-inline-end: 3px;
    padding: 0;
  }

  #inner-container {
    align-items: center;
    cursor: pointer;
    display: grid;
    flex: 1;
    grid-template-areas: 'arrow folder label';
    grid-template-columns: 40px 24px auto;
    min-height: 0;
    min-width: fit-content;
    overflow: hidden;
    padding-inline-start: calc(var(--node-depth, 0) * 15px + 4px);
  }

  #arrow {
    --cr-icon-button-size: 40px;
    grid-area: arrow;
    justify-self: center;
    margin: 0;
  }

  #arrow:not([is-open]) {
    transform: rotate(-90deg);
    transition: transform 150ms;
  }

  .folder-icon {
    grid-area: folder;
    justify-self: center;
  }

  .menu-label {
    font-weight: 500;
    grid-area: label;
    padding: 0 6px;
    white-space: nowrap;
  }

  @media (prefers-color-scheme: dark) {
    .cr-nav-menu-item.drag-on {
      color: var(--google-grey-700);
    }
  }

  :host-context([dir='rtl']) #arrow:not([is-open]) {
    transform: rotate(90deg);
  }

  #arrow[is-open] {
    transform: initial;
  }

  .cr-vertical-tab::before {
    display: none;
  }

  #container {
    min-width: fit-content;
    padding-inline-end: 10px;
  }

  @media (prefers-color-scheme: dark) {
    .cr-nav-menu-item[selected] #arrow,
    .cr-nav-menu-item.drag-on #arrow {
      --cr-icon-button-fill-color: black;
    }

    .cr-nav-menu-item.drag-on {
      --iron-icon-fill-color: black;
      background: var(--google-blue-300);
      color: var(--google-grey-900);
    }
  }
</style>

<div id="container"
    class$="cr-vertical-tab cr-nav-menu-item [[getContainerClass_(isSelectedFolder_)]]"
    hidden="[[isRootFolder_(depth)]]"
    role="treeitem"
    aria-owns="descendants"
    tabindex$="[[getTabIndex_(selectedFolder_, itemId)]]"
    on-click="selectFolder_"
    on-dblclick="toggleFolder_"
    on-contextmenu="onContextMenu_"
    selected$="[[isSelectedFolder_]]">
  <div id="inner-container">
    <template is="dom-if" if="[[hasChildFolder_]]">
      <cr-icon-button id="arrow" iron-icon="cr:arrow-drop-down"
          on-click="toggleFolder_" on-mousedown="preventDefault_"
          tabindex="-1" is-open$="[[isOpen]]" noink aria-hidden="true">
      </cr-icon-button>
    </template>
    <div class="folder-icon icon-folder-open"
        open$="[[isSelectedFolder_]]"
        no-children$="[[!hasChildFolder_]]">
    </div>
    <div class="menu-label" title="[[item_.title]]">
      [[item_.title]]
    </div>
    <paper-ripple></paper-ripple>
  </div>
</div>
<div id="descendants" role="group">
  <template is="dom-if" if="[[isOpen]]">
    <template is="dom-repeat"
        items="[[item_.children]]"
        as="child"
        filter="isFolder_">
      <bookmarks-folder-node item-id="[[child]]"
          draggable="true"
          depth="[[getChildDepth_(depth)]]">
      </bookmarks-folder-node>
    </template>
  </template>
</div>