/* https://phabricator.wikimedia.org/T243126 */
/* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MinervaNeue/+/master/components/ToggleList */
/* https://codepen.io/Volker_E/pen/gOaEeyQ */
:not(:checked) + .checked-sibling\:off-screen {
  top: -999999px;
  left: -999999px;
}

:not(:checked) + .checked-sibling\:on-screen {
  top: -999999px;
  left: -999999px;
}



/*https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MinervaNeue/+/master/components/ToggleList/ToggleList.mustache */
/* https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MinervaNeue/+/master/components/ToggleList/ToggleList.less */

.toggle-list__checkbox {
	/* Always occlude the checkbox. The checkbox display cannot be none since its focus state is used
	for other selectors. */
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.toggle-list__toggle {
	/* labels are inline by default and this is also an icon */
	/* Use the hand icon for the toggle button which is actually a checkbox label. */
	cursor: pointer;
}
.toggle-list__checkbox:focus + .toggle-list__toggle {
	/* The toggle button / label itself cannot receive focus but the underlying checkbox can. Keep
	the button and checkbox focus presentation in sync. From
	resources/src/mediawiki.toc.styles/screen.less. */
	outline: dotted 1px; /* Firefox style for focus */
	outline: auto @colorProgressiveHighlight; /* Webkit style for focus */
}
.toggle-list__checkbox:checked + .toggle-list__toggle {
	/* show background when the toggle list is open */
	outline: 0;
	background: rgba( 1, 1, 1, 0.1 );
}
.touch-events .toggle-list__checkbox:focus + .toggle-list__toggle {
	/* Buttons have no focus outline on mobile. */
	outline: 0;
}
.toggle-list__list {
	background: @background-color-base;
	/* The menu appears over the content and occupies no room within it. */
	position: absolute;
	/* */
	/* If max-height is set and the height exceeds it, add a vertical scrollbar. */
	overflow-y: auto;
	/* */
	/* The menu floats over content but below overlays. */
	z-index: 25;
	/* */
	box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px rgba( 0, 0, 0, 0.24 );
	/* */
	visibility: hidden;
	opacity: 0;
}
.toggle-list__checkbox:checked ~ .toggle-list__list {
	/* Reveal the list when checked. */
	visibility: visible;
	opacity: 1;
}