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

@selector-collapsed-toc-button-checked: ~'#vector-toc-collapsed-checkbox:checked';

#vector-toc-collapsed-button {
	display: none;
}

@media ( max-width: @max-width-tablet ) {
	#vector-toc-collapsed-button,
	.sidebar-toc {
		z-index: @z-index-menu;
	}

	#vector-toc-collapsed-button {
		display: block;
		float: left;
		margin-right: 4px;
		margin-left: -10px;
		// Reduce padding to fit with page title
		padding: 7px 10px 7px 10px;

		// Override background color for when the TOC is overlaps content
		// as a sticky element when the page is scrolled down.
		background-color: @background-color-base;

		&:hover,
		&:active {
			background-color: @colorGray15;
		}
	}

	.mw-table-of-contents-container {
		position: relative;
		// Reset styles used by sticky TOC
		top: 0;
	}

	.sidebar-toc {
		position: absolute;
		top: 44px;
		left: -2px;
		// !important needed to override rules in Sidebar.less
		margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */

		// Dropdown styles
		background-color: @color-base--inverted;
		border: @border-width-base @border-style-base @border-color-base;

		// Remove TOC fade
		&:after {
			display: none;
		}
	}

	@{selector-collapsed-toc-button-checked} ~ .mw-table-of-contents-container .sidebar-toc {
		// Unhide the TOC when the button is checked
		display: block;
	}

	.vector-below-page-title {
		#vector-toc-collapsed-button,
		.sidebar-toc {
			position: fixed;
		}

		#vector-toc-collapsed-button {
			top: 0;
			left: 0;
			margin: 0;
		}

		.sidebar-toc {
			// TOC button height
			top: 36px;
			left: 6px;
		}
	}
}

@media ( min-width: @min-width-tablet ) and ( max-width: @max-width-tablet ) {
	body:not( .vector-below-page-title ) @{selector-checkbox-hack} .sidebar-toc {
		// Adjust TOC for when the main menu is open, which pushes the page title to the right
		left: 22px;
	}

	@{selector-collapsed-toc-button-checked} {
		// Apply float styles to the TOC and main menu to ensure the absolute positioned TOC
		// can remain in the correct location even when the main menu is open
		& ~ .mw-table-of-contents-container {
			clear: none;
			float: left;
		}

		& ~ #mw-navigation .mw-sidebar {
			float: left;
		}
	}
}