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

.citizen-toc {
	--citizen-toc-toggle-size: ~'calc( var( --font-size-small ) * var( --line-height-xs ) + var( --space-xs ) * 2 )';
	font-size: var( --font-size-small );
	line-height: var( --line-height-xs );

	&-top {
		.citizen-ui-icon {
			transform: rotate( 90deg );
		}
	}

	&-contents,
	&-list {
		margin: 0 0 0 var( --space-xs );
		list-style: none;
		border-left: var( --border-width-thick ) solid var( --border-color-base );

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

	&-link {
		position: relative;
		display: flex;
		gap: var( --space-xs );
		padding: var( --space-xs );
		font-weight: var( --font-weight-medium );
		color: var( --color-emphasized );

		&.citizen-toc-top {
			height: 0;
			padding-top: 0;
			padding-bottom: 0;
			opacity: 0 !important;
			transition-property: opacity, height, padding !important;
		}

		&:has( + .citizen-toc-toggle ) {
			/* Make space for toggle */
			margin-right: var( --citizen-toc-toggle-size );
		}

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

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

		&:hover,
		&:focus {
			text-decoration: none;
		}
	}

	&-toggle {
		position: absolute;
		top: 0;
		right: 0;
		display: none;
		width: var( --citizen-toc-toggle-size );
		height: var( --citizen-toc-toggle-size );
		padding: 0;
		background: transparent;
	}

	&-indicator {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		flex-shrink: 0;
		width: var( --border-width-thick );
		margin-top: var( --space-xs );
		margin-bottom: var( --space-xs );
		margin-left: ~'calc( var( --border-width-thick ) * -1 )';
	}

	&-text {
		display: flex;
		gap: var( --space-xs );
	}

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

	&-list-item {
		position: relative;

		&--active {
			> .citizen-toc-link {
				color: var( --color-progressive );

				.citizen-toc-indicator {
					background-color: var( --color-progressive );
				}
			}
		}
	}
}

// Collapse ToC sections by default, excluding no-js
.client-js .citizen-toc {
	.citizen-toc-level-1 .citizen-toc-list-item {
		display: none;
	}

	.citizen-toc-level-1.citizen-toc-list-item--expanded .citizen-toc-list-item {
		display: block;
	}

	.citizen-toc-toggle {
		--size-icon: var( --font-size-x-small );
		display: grid;
		place-content: center;
		cursor: pointer;
		border-radius: var( --border-radius--small );

		.citizen-ui-icon {
			&::before {
				transition: var( --transition-hover );
				transition-property: transform;
				transform: rotate3d( 1, 0, 0, 180deg );
			}
		}

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

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

	.citizen-toc-level-1.citizen-toc-list-item--expanded .citizen-toc-toggle .citizen-ui-icon::before {
		transform: none;
	}
}

// Sticky header styles
.citizen-page-header--sticky {
	.citizen-toc-top.citizen-toc-link {
		height: 2rem; // 1rem text + 1rem padding
		padding-top: var( --space-xs );
		padding-bottom: var( --space-xs );
		opacity: 1 !important;
	}
}

@media ( max-width: ( @max-width-breakpoint-tablet ) ) {
	.citizen-toc {
		position: fixed;
		bottom: ~'calc( var( --header-size ) + var(  --space-xs ) )';
		left: 0;
		z-index: @z-index-sticky; // Keep ToC above sticky header and page action, but below site header
		display: flex;
		flex-direction: column-reverse; // HACK: Place button below ToC
		pointer-events: none; // HACK: Make background clickable
		transition: var( --transition-menu );
		transition-property: bottom; // Transform won't work with the backdrop

		&-card {
			// This is not bulletproof since it will get covered by page header
			// in extremely short height. but it should be good for now
			max-height: ~'calc( var( --header-card-maxheight ) - 8rem )';
			padding: var( --space-xs );
			transform-origin: var( --transform-origin-offset-start ) var( --transform-origin-offset-end );
		}

		.citizen-dropdown {
			&-summary {
				position: absolute;
				bottom: 0;
				left: 0;
				display: grid;
				place-content: center;
				width: var( --toolbar-size );
				height: var( --toolbar-size );
				margin: var( --space-xs );
				pointer-events: auto; // HACK: Make button clickable
				background-color: var( --color-surface-1 );
				border-radius: var( --border-radius-medium );
				box-shadow: var( --box-shadow-drop-xx-large );

				// The hover state colors are not great but it will do for now
				&:hover {
					background: ~'linear-gradient( var( --background-color-button-quiet--hover ), var( --background-color-button-quiet--hover ) ) var( --color-surface-1 )';
				}

				&:active {
					background: ~'linear-gradient( var( --background-color-button-quiet--active ), var( --background-color-button-quiet--active ) ) var( --color-surface-1 )';
				}
			}

			&-details[ open ] {
				+ .citizen-menu__card {
					pointer-events: auto; // HACK: Make ToC clickable after ToC is expanded
				}

				> .citizen-dropdown-summary {
					background: ~'linear-gradient( var( --background-color-button-quiet--active ), var( --background-color-button-quiet--active ) ) var( --color-surface-1 )';
				}
			}
		}
	}
}

@media ( min-width: @min-width-breakpoint-desktop ) {
	.citizen-toc {
		position: -webkit-sticky;
		position: sticky;
		top: var( --height-sticky-header );
		max-height: ~'calc( 100vh - var( --height-sticky-header ) )';
		padding: var( --space-xs ) 0;
		overflow-y: auto;
		overscroll-behavior: contain;

		.citizen-menu__card {
			margin: 0;
			background: transparent;
			border: 0;
			box-shadow: none;
			transform: none;

			> * {
				opacity: 1;
			}
		}

		// Hide button in desktop viewport
		.citizen-dropdown-summary {
			display: none;
		}
	}
}