.navbarItem .inner { background-color: var(--oxford-blue); color: var(--fg); padding: 8px; border-radius: 8px; transition-property: background-color, color; transition-duration: .15s; position: relative; } .navbarItem { text-decoration: none; display: block; } .navbarItem .icon { display: inline-block; } .navbarItem .icon .collapseIcon { transform: rotate(0deg); transition-property: transform; transition-duration: .3s; } .navbarItem .icon .collapseIcon.collapsed { transform: rotate(-90deg); } .navbarItem .icon, .navbarItem .title { cursor: pointer; } .navbarItem.indentLevel0 { margin-bottom: 12px; } .navbarItem.active .inner, .navbarItem.link:hover .inner { background-color: var(--heliotrope-gray); color: var(--oxford-blue); } .navbarItem.chapter .inner, .navbarItem.pinned .inner { background-color: transparent; color: var(--fg); padding: 4px 0; overflow: visible; } .navbarItem.pinned .inner .title { margin: 0; font-style: italic; opacity: .8; color: var(--heliotrope-gray) } .navbarItem.pinned * { cursor: default !important; } .navbarItem .title { vertical-align: top; margin-left: 8px; margin-top: 3px; display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: calc(100% - 32px); } .navbarItem.chapter .title { margin-top: 1px; } .navbarItem.chapter .chapterChildren { transition-property: height; transition-duration: .3s; overflow: hidden; } .navbarItem.chapter.childrenCollapsed > .chapterChildren { height: 0; } .navbarItem.chapter > .chapterChildren { height: var(--children-height); } .navbarItem .inner, .navbarItem .icon, .navbarItem .icon .collapseIcon { height: 24px; } .navbarItem > div > svg { vertical-align: super; } @media (prefers-color-scheme: light) { .navbarItem .inner { background-color: var(--heliotrope-gray); } .navbarItem.active .inner, .navbarItem.link:hover .inner { color: var(--bg); background-color: var(--fg); } .navbarItem.pinned .inner .title { opacity: .6; color: var(--oxford-blue) } }