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

.toc {
	display: none;
	position: relative;
	margin: 1em 0;
	padding: 0.2em 0.5em;
	background-color: @colorGray15;
	border: solid 1px @grayLightest;
	box-sizing: border-box;
}

.toctogglecheckbox ~ ul {
	display: none;
}

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

.toctogglelabel {
	cursor: pointer;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 50px;
	z-index: @z-indexAboveContent;
}

.client-js .toc {
	.toctitle {
		@toctitle-vertical-padding: 1.4em / 2;
		visibility: hidden;
		background-position: right center;
		font-weight: bold;
		border-bottom: 0;

		h2 {
			display: inline-block;
			font-family: @font-family-base;
			font-size: unit( 18/16, em );
			vertical-align: middle;
		}
	}

	.tocnumber {
		display: none;
	}

	> ul {
		font-size: @font-size-minerva-small;
		margin-left: 52px;
		margin-right: 24px;
		padding: 0 0 20px;
	}

	ul {
		list-style: none;
	}
}

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

		.toctitle {
			visibility: visible;
		}
	}
}