mediawiki-skins-Citizen/resources/skins.citizen.styles/TableOfContents.less

.citizen-toc {
	font-size: 0.875rem;
	line-height: 1.2;

	&__card {
		display: flex;
		flex-direction: column;
		gap: var( --space-sm );
	}

	&__top {
		&:before {
			width: 0.875rem;
			height: 0.875rem;
			content: '';
			opacity: var( --opacity-icon-base );
		}

		&:hover:before {
			opacity: var( --opacity-icon-base--hover );
		}

		&:active:before {
			opacity: var( --opacity-icon-base--hover );
		}
	}

	&__header {
		color: var( --color-base--subtle );
		letter-spacing: 0.75px;
	}

	&__contents {
		margin-left: 1px;
	}

	&__contents,
	&__list {
		border-left: 1px solid var( --border-color-base );
		margin-top: 0;
		list-style: none;

		.citizen-toc__link {
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
		}
	}

	&__list {
		margin-left: var( --space-sm );
	}

	&__link {
		display: flex;
		padding-top: var( --space-sm );
		padding-bottom: var( --space-sm );
		border-radius: var( --border-radius--small );
		color: var( --color-base );
		font-weight: 500;
		gap: var( --space-sm );

		&.citizen-toc__top {
			height: 0;
			opacity: 0;
			transition: @transition-opacity, @transition-height;
			visibility: hidden;
		}

		&:hover {
			background-color: var( --background-color-quiet--hover );
		}

		&:active {
			background-color: var( --background-color-quiet--active );
		}
	}

	&__indicator {
		width: 3px;
		flex-shrink: 0;
		border-radius: 1000px;
		margin-left: -2px;
	}

	&__text {
		display: flex;
		gap: var( --space-sm );
	}

	&__numb {
		display: none;
		color: var( --color-base--subtle );
	}

	&__listItem {
		&--active {
			> .citizen-toc__link {
				color: var( --color-primary );

				.citizen-toc__indicator {
					background-color: var( --color-primary );
				}
			}
		}
	}
}

// Sticky header styles
.citizen-body-header--sticky {
	.citizen-toc__top.citizen-toc__link {
		height: 1.05rem; // ( 1rem text + 1rem padding ) * line height / 2
		opacity: 1;
		visibility: visible;
	}
}

.skin-citizen-dark {
	.citizen-toc__top:before {
		filter: invert( 1 );
	}
}

@media ( min-width: @width-breakpoint-desktop ) {
	.citizen-toc {
		grid-area: toc;

		&__card {
			--toc-margin-top: 0;
			position: sticky;
			top: var( --toc-margin-top );
			max-height: ~'calc( 100vh - var( --toc-margin-top ) )';
			overflow-y: auto;
			overscroll-behavior: contain;
		}
	}

	// Sticky header styles
	.citizen-body-header--sticky {
		.citizen-toc__card {
			--toc-margin-top: ~'calc( var( --header-size ) + var( --space-xl ) )';

			// Sticky header is shorter without buttons
			@media ( max-height: 800px ) {
				--toc-margin-top: ~'calc( var( --header-size ) + var( --space-md ) )';
			}
		}
	}
}