| <style> | 
 |   :host { | 
 |     color: var(--cr-primary-text-color); | 
 |     display: flex; | 
 |     flex-direction: column; | 
 |     height: 100%; | 
 |     line-height: 1.54;  /* 20px. */ | 
 |   } | 
 |  | 
 |   #main-container { | 
 |     display: flex; | 
 |     flex-direction: row; | 
 |     flex-grow: 1; | 
 |     overflow: hidden; | 
 |   } | 
 |  | 
 |   #splitter { | 
 |     box-sizing: border-box; | 
 |     cursor: col-resize; | 
 | <if expr="is_win"> | 
 |     /* Unlike other platforms, e-resize is a two-way arrow on Windows. */ | 
 |     cursor: e-resize; | 
 | </if> | 
 |     flex: 0 0 var(--splitter-width); | 
 |     opacity: 0; | 
 |   } | 
 |  | 
 |   #splitter:hover, | 
 |   #splitter.splitter-active { | 
 |     border-inline-start: 1px solid rgba(0, 0, 0, 0.1); | 
 |     opacity: 1; | 
 |     transition: opacity 100ms ease-out; | 
 |   } | 
 |  | 
 |   @media (prefers-color-scheme: dark) { | 
 |     #splitter:hover, | 
 |     #splitter.splitter-active { | 
 |       border-inline-start-color: var(--cr-separator-color); | 
 |     } | 
 |   } | 
 |  | 
 |   #sidebar { | 
 |     display: flex; | 
 |     flex-direction: column; | 
 |     max-width: 40%; | 
 |     min-width: var(--min-sidebar-width); | 
 |     width: var(--min-sidebar-width); | 
 |   } | 
 |  | 
 |   bookmarks-folder-node { | 
 |     flex: 1; | 
 |     overflow-y: auto; | 
 |     padding: 8px 0; | 
 |     user-select: none; | 
 |   } | 
 |  | 
 |   managed-footnote { | 
 |     --managed-footnote-icon-padding: 12px; | 
 |     flex: 0; | 
 |     padding-bottom: 24px; | 
 |     padding-top: 24px; | 
 |   } | 
 |  | 
 |   bookmarks-list { | 
 |     flex: 1; | 
 |     overflow-x: hidden; | 
 |   } | 
 | </style> | 
 | <bookmarks-toolbar sidebar-width="[[sidebarWidth_]]" role="banner"> | 
 | </bookmarks-toolbar> | 
 | <div id="main-container"> | 
 |   <div id="sidebar" role="tree" aria-label="$i18n{sidebarAxLabel}"> | 
 |     <bookmarks-folder-node item-id="0" depth="-1"></bookmarks-folder-node> | 
 |     <managed-footnote></managed-footnote> | 
 |   </div> | 
 |   <cr-splitter id="splitter"></cr-splitter> | 
 |   <bookmarks-list></bookmarks-list> | 
 | </div> | 
 | <bookmarks-router></bookmarks-router> | 
 | <bookmarks-command-manager></bookmarks-command-manager> | 
 | <cr-toast-manager duration="10000"> | 
 |   <dom-if> | 
 |     <template> | 
 |       <cr-button on-click="onUndoClick_" aria-label="$i18n{undoDescription}"> | 
 |         $i18n{undo} | 
 |       </cr-button> | 
 |     </template> | 
 |   </dom-if> | 
 | </cr-toast-manager> |