article .headerlink {
	@apply inline-block opacity-0 transition-opacity no-underline duration-100 text-muted-foreground ml-2;
}

article h1:hover .headerlink,
article h2:hover .headerlink,
article h3:hover .headerlink,
article h4:hover .headerlink,
article h5:hover .headerlink,
article h6:hover .headerlink {
    @apply opacity-30;
}

article .headerlink:hover {
    @apply !opacity-100;
}

article div.toc {
    @apply text-muted-foreground;
}

article div.toc a {
    @apply no-underline text-muted-foreground font-normal hover:text-primary transition-colors duration-200;
}

article div.toc ul {
    @apply mt-2 mx-4 list-none;
}


article h1:has(.headerlink.leading),
article h2:has(.headerlink.leading) ,
article h3:has(.headerlink.leading) ,
article h4:has(.headerlink.leading),
article h5:has(.headerlink.leading) ,
article h6:has(.headerlink.leading) {
    @apply relative;
}

article .headerlink.leading {
    @apply absolute left-0 -translate-x-full ml-0 pr-2;
}