diff --git a/resources/common/variables.less b/resources/common/variables.less
index efaeecaba..87c63218b 100644
--- a/resources/common/variables.less
+++ b/resources/common/variables.less
@@ -139,6 +139,16 @@
 @selector-main-menu-open: ~'#mw-sidebar-checkbox:checked';
 @selector-main-menu-closed: ~'#mw-sidebar-checkbox:not( :checked )';
 
+// TOC
+@sidebar-toc-fade-height: 30px;
+@sidebar-toc-vertical-padding: 20px;
+@sidebar-toc-right-padding: 12px;
+// Sidebar TOC uses increased left padding and a negative left margin to achieve
+// a 15px spacing without clipping the chevron icon
+// https://phabricator.wikimedia.org/T312156#8095894
+@sidebar-toc-left-padding: 15px + @sidebar-toc-right-padding;
+@toc-subsection-toggle-icon-size: 1.834em;
+
 // Sidebar
 @width-sidebar-px: 220px;
 @width-sidebar-px-wide: 244px;
diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less
index 22edba8fc..906c7a7ab 100644
--- a/resources/skins.vector.styles/components/TableOfContents.less
+++ b/resources/skins.vector.styles/components/TableOfContents.less
@@ -1,62 +1,5 @@
 @import '../../common/variables.less';
 
-@sidebar-toc-fade-height: 30px;
-@sidebar-toc-vertical-padding: 20px;
-@sidebar-toc-right-padding: 12px;
-// Sidebar TOC uses increased left padding and a negative left margin to achieve
-// a 15px spacing without clipping the chevron icon
-// https://phabricator.wikimedia.org/T312156#8095894
-@sidebar-toc-left-padding: 15px + @sidebar-toc-right-padding;
-@toc-subsection-toggle-icon-size: 1.834em;
-
-.mw-table-of-contents-container {
-	// Needed for Grid-based layout
-	align-self: start;
-	height: 100%;
-}
-
-#vector-toc-pinned-container {
-	// stylelint-disable-next-line plugin/no-unsupported-browser-features
-	position: sticky;
-	top: 0;
-
-	@media ( min-width: @min-width-desktop ) {
-		.vector-toc-pinned & {
-			// Default spacing separating the sidebar TOC from the main menu or viewport.
-			// Need to use padding in order for the spacing to apply when sticky
-			padding-top: 1.5em;
-		}
-
-		.vector-feature-page-tools-disabled.vector-toc-pinned @{selector-main-menu-closed} ~ .mw-table-of-contents-container &,
-		.vector-feature-page-tools-enabled.vector-toc-pinned.vector-feature-main-menu-pinned-disabled & {
-			// Needed to align TOC with bottom of title, 1.5em padding + 1.5em margin = 3em
-			margin-top: 1.5em;
-		}
-
-		.sidebar-toc,
-		.sidebar-toc:after {
-			// Align the left edge of the TOC text with the main menu button icon.
-			margin-left: -@sidebar-toc-left-padding;
-		}
-
-		// T302076: Add fade scrollable indicator when TOC is in sidebar
-		// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
-		.vector-toc-pinned & .sidebar-toc:after {
-			content: '';
-			display: block;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			height: @sidebar-toc-fade-height;
-			background: linear-gradient( rgba( 255, 255, 255, 0 ), @background-color-page-container );
-			background-repeat: no-repeat;
-			background-position: -@sidebar-toc-right-padding; // T311436 Hacky way to prevent the fade from covering the scrollbar
-			pointer-events: none; // Make the link below the fade clickable
-		}
-	}
-}
-
 .sidebar-toc {
 	max-height: 75vh;
 	padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding;
diff --git a/resources/skins.vector.styles/components/TableOfContentsPinned.less b/resources/skins.vector.styles/components/TableOfContentsPinned.less
new file mode 100644
index 000000000..b6878b478
--- /dev/null
+++ b/resources/skins.vector.styles/components/TableOfContentsPinned.less
@@ -0,0 +1,49 @@
+@import '../../common/variables.less';
+
+.mw-table-of-contents-container {
+	// Needed for Grid-based layout
+	align-self: start;
+	height: 100%;
+}
+
+#vector-toc-pinned-container {
+	// stylelint-disable-next-line plugin/no-unsupported-browser-features
+	position: sticky;
+	top: 0;
+
+	@media ( min-width: @min-width-desktop ) {
+		.vector-toc-pinned & {
+			// Default spacing separating the sidebar TOC from the main menu or viewport.
+			// Need to use padding in order for the spacing to apply when sticky
+			padding-top: 1.5em;
+		}
+
+		.vector-feature-page-tools-disabled.vector-toc-pinned @{selector-main-menu-closed} ~ .mw-table-of-contents-container &,
+		.vector-feature-page-tools-enabled.vector-toc-pinned.vector-feature-main-menu-pinned-disabled & {
+			// Needed to align TOC with bottom of title, 1.5em padding + 1.5em margin = 3em
+			margin-top: 1.5em;
+		}
+
+		.sidebar-toc,
+		.sidebar-toc:after {
+			// Align the left edge of the TOC text with the main menu button icon.
+			margin-left: -@sidebar-toc-left-padding;
+		}
+
+		// T302076: Add fade scrollable indicator when TOC is in sidebar
+		// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
+		.vector-toc-pinned .sidebar-toc:after {
+			content: '';
+			display: block;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			height: @sidebar-toc-fade-height;
+			background: linear-gradient( rgba( 255, 255, 255, 0 ), @background-color-page-container );
+			background-repeat: no-repeat;
+			background-position: -@sidebar-toc-right-padding; // T311436 Hacky way to prevent the fade from covering the scrollbar
+			pointer-events: none; // Make the link below the fade clickable
+		}
+	}
+}
diff --git a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less b/resources/skins.vector.styles/components/TableOfContentsUnpinned.less
similarity index 100%
rename from resources/skins.vector.styles/components/TableOfContentsCollapsed.less
rename to resources/skins.vector.styles/components/TableOfContentsUnpinned.less
diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less
index 850c3eddc..25e8621ac 100644
--- a/resources/skins.vector.styles/skin.less
+++ b/resources/skins.vector.styles/skin.less
@@ -30,7 +30,8 @@
 	@import './components/StickyHeader.less';
 	@import './components/TabWatchstarLink.less';
 	@import './components/TableOfContents.less';
-	@import './components/TableOfContentsCollapsed.less';
+	@import './components/TableOfContentsPinned.less';
+	@import './components/TableOfContentsUnpinned.less';
 	@import './components/Icon.less';
 
 	.vector-feature-page-tools-disabled {