.calepin-website-toc {
align-self: start;
color: var(--calepin-color-muted);
font-size: 0.84rem;
text-align: left;
}
.calepin-website-toc.is-floating {
position: sticky;
top: calc(var(--calepin-topbar-height) + 1rem);
max-height: calc(100vh - var(--calepin-topbar-height) - 2rem);
overflow-y: auto;
scrollbar-width: thin;
}
.calepin-website-toc-title {
margin: 0 0 0.7rem;
color: var(--calepin-color-muted);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-align: left;
text-transform: uppercase;
}
.calepin-website-toc nav {
display: block;
font-size: 0.875rem;
text-align: left;
}
.calepin-website-toc nav ul {
display: grid;
gap: 0.04rem;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
.calepin-website-toc nav li {
display: block;
width: 100%;
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
}
.calepin-website-toc a {
display: block;
box-sizing: border-box;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
padding-block: 0.12rem;
padding-inline: calc(0.45rem + var(--calepin-toc-indent, 0rem)) 0.45rem;
border-radius: var(--calepin-radius-sm);
color: inherit;
line-height: 1.3;
overflow-wrap: anywhere;
text-align: left;
text-decoration: none;
text-wrap: pretty;
word-break: normal;
}
.calepin-website-toc a:hover,
.calepin-website-toc a:focus,
.calepin-website-toc a:active,
.calepin-website-toc a:visited {
color: inherit;
}
.calepin-website-toc a:hover,
.calepin-website-toc a:focus {
background: color-mix(in srgb, var(--calepin-color-accent) 12%, transparent);
}
.calepin-website-toc a.active {
background: color-mix(in srgb, var(--calepin-color-accent) 14%, transparent);
color: inherit;
font-weight: 600;
}
.calepin-website-toc li.level-2 a { --calepin-toc-indent: 0rem; }
.calepin-website-toc li.level-3 a { --calepin-toc-indent: 0.9rem; }
.calepin-website-toc li.level-4 a { --calepin-toc-indent: 1.8rem; }
.calepin-website-toc li.level-5 a { --calepin-toc-indent: 2.7rem; }
.calepin-website-toc li.level-6 a { --calepin-toc-indent: 3.6rem; }