@import '../../../minerva.less/minerva.variables.less';

@toc-large-icon: 44px;
@toc-small-icon: 34px;

.toc {
	display: none;
	position: relative;
	margin: 1em 0;
	padding: 0 1em 1em 1em;
	background-color: @background-color-lightest;
	border: @border-width-base @border-style-base #eaecf0;
	box-sizing: border-box;

	// We need high specificity to override .content ul
	&.toc > ul {
		// Account for the icon spaces left and right.
		// margin: 0 @toc-small-icon 0 @toc-large-icon;
		font-size: @font-size-minerva-small;
		// Reset `.client-js .toc > ul`.
		padding-left: 0;
	}

	// We need high specificity to override .content ul
	&.toc ul {
		list-style: none;
		// break long headings like urls
		word-break: break-word;
	}
}

.toctitle {
	@toctitle-vertical-padding: 1.4em / 2;
	font-weight: bold;
	display: flex;
	// Force vertical centering on title by making this full height
	align-items: center;
	// Ensure height for icon
	min-height: @toc-large-icon;

	// We need high specificity to override .content h2
	&.toctitle h2 {
		display: inline-block;
		font-family: @font-family-base;
		font-size: unit( 18/16, em );
		vertical-align: middle;
	}
}

.tocnumber {
	display: none;
}

.toctogglelabel {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: @toc-large-icon;
	z-index: @z-indexAboveContent;
}

// Do stuff we only need to do with JS
// Collapsing and reserving space for the JS icons
.client-js .toc {
	// Reset padding, because we need to reserve space for icons
	padding: 0;

	.toctitle {
		// Reserve space for icons
		padding: 0 @toc-small-icon 0 @toc-large-icon;

		.mw-ui-icon {
			position: absolute;
			left: 0;
		}

		.toctogglespan + .mw-ui-icon {
			top: (@toc-large-icon - @toc-small-icon) / 2;
			right: 0;
			left: auto;
		}
	}

	> ul {
		// Account for the icon spaces left and right.
		margin: 0 @toc-small-icon 0 @toc-large-icon;
	}

	.toctogglecheckbox ~ ul {
		visibility: hidden;
		height: 0;
	}

	.toctogglecheckbox:checked ~ ul {
		visibility: visible;
		padding-bottom: 20px;
		height: auto;
	}

	.toctogglelabel {
		cursor: pointer;
	}
}

@media screen and ( min-width: @width-breakpoint-tablet ) {
	.toc {
		// Reset the rule for mobile mode
		display: table;

		.toctitle {
			visibility: visible;
		}
	}
}