/*
 * @title			ScrollSpy.css
 * @description		Moves table of contents to the right rail and highlights
                    the current section that the user scrolled in.
 * @author			Polymeric
 * @license			CC-BY-SA 3.0
 * @notes			Please install ScrollSpy.js for full functionality.
**/

/*
** When #WikiaRail is populated it adds an <hr> element that adds some spacing
** between the top of the screen and the sticky rail modules. To compensate for
** that, we use different styles for both the sticky modules wrapper and the TOC
** list's height depending on wether or not #WikiaRail has contents. This is to
** achieve a consistent look no matter if custom modules are used or not.
**
** The height of the TOC's list is (100% viewport height - TOC header's height -
** top nav bar's height - extra margin between the TOC and the top navbar and/or
** the bottom of the screen/the next module).
*/
.sticky-modules-wrapper {
    top: 84px;
}

.sticky-modules-wrapper > #toc-module > #toc > ul {
    max-height: calc(100vh - 84px - 42px);
    min-height: 44px;
    overflow-y: auto;
}

#WikiaRail:empty + .sticky-modules-wrapper {
    top: 24px;
}

#WikiaRail:empty + .sticky-modules-wrapper > #toc-module > #toc > ul {
    max-height: calc(100vh - 42px - 46px - 48px);
}

/* Highlight TOC links when they are scrolled into view. */
.toc ul li.is-active a {
    background-color: rgba(var(--theme-link-color--rgb), .15);
}

.toc ul li.is-active a,
.toc ul li.is-active a .tocnumber {
    color: var(--theme-link-color);
}