@import '../../../minerva.less/minerva.variables.less';
@import '../../../minerva.less/minerva.mixins.less';
@import 'mediawiki.mixins.less';

.toggle-list-item {
	display: block;
}

.toggle-list-item__anchor {
	display: flex;
	align-items: center;
	padding: 0.75em 0.875em;

	&:hover {
		text-decoration: none;
	}
}

.toggle-list-item__label {
	color: @color-subtle;
	font-weight: bold;
	font-size: @font-size-minerva-small;
	// Overflow text is ellipsized in one line.
	.text-overflow( @visible: false );
}

.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__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: @z-indexDrawer;
	//
	box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px #a2a9b1;
	//
	visibility: hidden;
	opacity: 0;
}

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