/* This style adds a toggle button with internationalized message for the TOC. */

/* When the browser supports :checked then overwrite the style="display:none" and make the /*
/* checkbox invisible on another way to allow to focus the checkbox with keyboard. */
:not( :checked ) > .toctogglecheckbox {
	display: inline !important; /* stylelint-disable-line declaration-no-important */
	position: absolute;
	opacity: 0;
}

.toctogglespan {
	font-size: 94%;
}

/* IE8 does not support :checked and therefor it does not support the hiding at all. */
/* The selector ":not( :checked ) >" prevents that the useless brackets are shown on IE8. */
:not( :checked ) > .toctogglespan:before {
	content: ' [';
}

:not( :checked ) > .toctogglespan:after {
	content: ']';
}

/* Make the label look like a link. */
.toctogglelabel {
	cursor: pointer;
	color: #0645ad;
}

.toctogglelabel:hover {
	text-decoration: underline;
}

/* Show a focus ring around the label when focusing the invisible checkbox. */
/* This simulates that the label is in focus. */
.toctogglecheckbox:focus + .toctitle .toctogglelabel {
	text-decoration: underline;
	outline: dotted 1px; /* Firefox style for focus */
	outline: auto -webkit-focus-ring-color; /* Webkit style for focus */
}

/* Change the text of the button based on the state of the checkbox. */
.toctogglecheckbox:checked + .toctitle .toctogglelabel:after {
	content: '@{msg-showtoc}';
}

.toctogglecheckbox:not( :checked ) + .toctitle .toctogglelabel:after {
	content: '@{msg-hidetoc}';
}

/*
Cached: https://phabricator.wikimedia.org/T195053#4417392
Can be cleared at least one week after the above comment
*/
.toctogglespan ~ .toctoggle {
	display: none;
}