@import '../../minerva.less/minerva.variables.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: @z-indexOccluded;
	opacity: 0;
}

.toggle-list__toggle {
	// labels are inline by default and this is also an icon
	display: inline-block;
	// 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 */
}

.touch-events .toggle-list__checkbox:focus + .toggle-list__toggle {
	// Buttons have no focus outline on mobile.
	outline: 0;
}

.toggle-list__list {
	// 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: @z-indexDrawer;
	//
	background: @skinContentBgColor;
	box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px @colorGray10;
	border-radius: @borderRadius;
	//
	visibility: hidden;
	opacity: 0;
}

.toggle-list__checkbox:checked ~ .toggle-list__list {
	// Reveal the list when checked.
	visibility: visible;
	opacity: 1;
}