// A DropdownList is a ToggleList that extends downward.

.toggle-list__list--drop-down {
	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-index-drawer;
	// Two box-shadows: first creates a drop-shadow, second acts as a subtle border.
	box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px @border-color-base;
	visibility: hidden;
	opacity: 0;
	transform: translateY( -8px );

	// When cursor is pointer and -webkit-tap-highlight-color is set, the color does not seem to
	// transition. Clear it.
	-webkit-tap-highlight-color: transparent;

	.toggle-list-item:hover {
		// Make the app feel like an app, not a JPEG. When hovering over a menu item, add a little
		// interactivity.
		background: @background-color-interactive;
	}
}

// Without the minerva-animations-ready class, DropdownList can appear and
// perform its exit animation when the page loads in chrome (and possibly
// others).
// https://bugs.chromium.org/p/chromium/issues/detail?id=332189
.minerva-animations-ready {
	.toggle-list__list--drop-down {
		// Animate menu visibility, opacity, and translation changes in and out. Visibility duration
		// cannot be animated initially as it causes a flash on page load in Chromium due to
		// https://bugs.chromium.org/p/chromium/issues/detail?id=332189.
		transition: opacity @transition-duration-base ease-in-out, -webkit-tap-highlight-color 0s ease-in-out, transform @transition-duration-base ease-in-out, visibility @transition-duration-base ease-in-out;
	}
}

.toggle-list__checkbox:checked ~ .toggle-list__list--drop-down {
	transform: translateY( 0 );
	// Reveal the list when checked.
	visibility: visible;
	opacity: 1;
}