//
// Styling for Toc
//
// This file is part of the MediaWiki skin Chameleon.
// @copyright 2023, Morne Alberts, GNU General Public License, version 3 (or any later version)
//
// @since 3.5

.chameleon-toc-wrapper {
	position: sticky;
	top: 0;
	z-index: 1;

	max-height: 100vh;
	overflow: auto;

	// Default offset is one navbar plus extra.
	--scrollspy-offset: 80;
}

.chameleon-toc {
	.toctitle {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		border-bottom: 1px solid $border-color;
	}

	#mw-toc-heading {
		font-size: unset;
		border-bottom: unset;
		margin: 0;
		padding: 0;
	}

	label.toctogglelabel {
		margin-bottom: 0;
	}

	.toc {
		border: unset;
		font-size: unset;

		ul {
			flex-direction: column;
			margin: 0;
		}

		ul ul {
			margin-left: 1rem;
		}
	}

	li {
		margin-bottom: 0;
	}

	.toctogglecheckbox:checked ~ ul {
		display: none;
	}

	.tocnumber {
		display: none;
	}

	.nav-link {
		padding: 0.2rem 0;
	}

	a,
	a:visited {
		color: $link-color;
	}

	a.active {
		font-weight: bold;
		color: $body-color;
	}

	.btn.toggle {
		padding: 0;
		margin-right: 5px;
		width: 12px;
		margin-left: -1rem;
	}

	.toggle-icon {
		display: block;
	}

	.toggle-icon::before {
		content: "+";
	}

	.nav.show ~ .btn.toggle .toggle-icon::before {
		content: "-";
	}

	.toclevel-1 {
		display: flex;
		flex-wrap: wrap;

		.toggle {
			order: -1;
		}

		.nav {
			flex-basis: 100%;
		}

		ul.collapsing {
			display: flex;
			flex-wrap: nowrap;
		}
	}

	&.has-collapsible {
		.toc > ul {
			margin-left: 1rem;
		}
	}
}

.p-navbar.sticky + div .chameleon-toc-wrapper {
	top: $navbar-padding-y * 2 + $nav-link-padding-y * 2 + $font-size-base * $line-height-base;
}

// Hide page TOC to prevent page content shift.
@include media-breakpoint-up(md) {
	.has-chameleon-toc #bodyContent #toc {
		display: none;
	}
}