/**
 * Stylesheet for Table Of Contents in Banners displayed by WikidataPageBanner extension.
 * All style rules have been applied with a prefix of wrapping .banner-toc, so cloning the original
 * toc and styling the clone will have no side-effects
 */
@import 'mediawiki.mixins';
// hide topbanner-toc by default
.wpb-topbanner-toc {
	display: none;
}

// style rules to apply only if screen wide enough for a horizontal toc
@media screen and ( min-width: 768px ) {
	.wpb-topbanner-toc {
		display: block;
		position: absolute;
		background: rgba( 0, 0, 0, 0.5 ) none repeat scroll 0% 0%;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		// FIXME: This corresponds to @content-font-size in Vector so if this value ever changes
		// this could cause bugs. Unfortunately we cannot guarantee Vector is installed.
		font-size: 0.875em;
	}

	.wpb-banner-toc {
		display: table;
		color: #fff;
		background: none;
		border: medium none;
		line-height: 1.6em;
		padding: 0.2em 2em;
		margin: 0;
		width: auto;

		// Suppress numbering of items in TOC &
		// Hide TOC title
		.tocnumber,
		.toctitle {
			display: none;
		}

		> div > ul {
			list-style: none;
			margin: 0;
			background: rgba( 0, 0, 0, 0.6 ) none repeat scroll 0% 0%;
			z-index: 4;
		}

		a,
		a:visited,
		a:active {
			display: block;
			color: #fff;
			font-size: 0.8em;
			font-weight: bold;
		}

		a:hover {
			color: #bdddfd;
		}

		// these are actual toc items
		li {
			position: relative;
			padding: 0 0.4em;
			margin: 0;

			> ul {
				list-style: none;
				margin: 0;
				background: rgba( 0, 0, 0, 0.6 ) none repeat scroll 0% 0%;
				z-index: 4;
			}
		}

		// On hovering over a list item, show the list items which are immediate child of this item
		li:hover {
			& > ul > li {
				display: block;
			}
			// make hovered element prominent
			background: rgba( 0, 0, 0, 0.8 ) none repeat scroll 0% 0%;
		}
		// Separate rule so that IE11 interprets at least the :hover one and drops only :focus-within
		// stylelint-disable-next-line no-descending-specificity
		li:focus-within {
			& > ul > li {
				display: block;
			}
			// make hovered element prominent
			background: rgba( 0, 0, 0, 0.8 ) none repeat scroll 0% 0%;
		}

		// Prevent display of subheadings in horizontal ToC
		.toclevel-2,
		.toclevel-3,
		.toclevel-4,
		.toclevel-5,
		.toclevel-6 {
			display: none;
			white-space: nowrap;
			.transition( all 0.5s );
		}

		.toclevel-1 {
			float: left;
			// position immediate child list of level-1 items as vertical drop-downs
			& > ul {
				position: absolute;
				top: 100%;
				left: 0;
			}
		}

		.toclevel-2 {
			// make immediate children of lists of items beyond level-2 open as side lists
			ul {
				position: absolute;
				left: 100%;
				top: 0;
			}
		}
	}

	// Hide original TOC by default
	.toc {
		display: none;
	}
}