main.learn { > nav { --nav-offset: calc(var(--offset) + 2rem); counter-reset: content-theme; position: sticky; top: 0; padding-block: var(--nav-offset) var(--offset); max-height: 100dvh; overflow: auto; scrollbar-width: thin; font-size: var(--font-size-xs); line-height: var(--line-height-xs); text-transform: uppercase; padding-left: 0.5rem; margin-left: -0.5rem; ol { list-style: none; margin: 0; padding: 0; } > ol > li { counter-increment: content-theme; counter-reset: content-topic; } > ol > li > ol > li { counter-increment: content-topic; counter-reset: content-detail; } > ol > li > ol > li > ol > li { counter-increment: content-detail; } ol ol { margin-top: 0.25rem; margin-left: 1rem; color: var(--gray); } li + li { margin-top: 0.25rem; } a { display: block; scroll-margin-block: var(--offset); color: inherit; text-decoration: none; margin-right: 1rem; margin-block: -0.25rem; margin-left: -0.5rem; padding: 0.25rem; padding-left: 0.5rem; &::before { opacity: 0.5; } &:is(:hover, :active) { border-radius: 0.25rem; } &:hover { color: var(--white); background-color: var(--dark-gray); } &[aria-current="location"] { color: var(--orange); } &:active { color: var(--black); background-color: var(--orange); } } > ol > li > a::before { content: counter(content-theme, upper-roman) ". "; } > ol > li > ol > li > a::before { content: counter(content-topic) ". "; } > ol > li > ol > li > ol > li > a::before { content: counter(content-detail, lower-alpha) ". "; } } }