// A DropDownList is a ToggleList that extends downward.

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

.toggle-list__list--drop-down {
	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;
}

.animations {
	.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 .1s ease-in-out, -webkit-tap-highlight-color 0s ease-in-out, transform .1s ease-in-out, visibility .1s ease-in-out; );
	}
}

.toggle-list__checkbox:checked ~ .toggle-list__list--drop-down {
	transform: translateY( 0 );
}