/*
Title: Animated Menu Hovers
Description: Trying Gutenberg's menu flyout animations in WP-Admin.
PR: https://github.com/WordPress/design-experiments/pull/13
*/

/* Keyframes */

@keyframes appear-animation {
	from {
		transform: translateY(-2em) scaleY(0) scaleX(0);
	}
	to {
		transform: translateY(0%) scaleY(1) scaleX(1);
	}
}

/* Animated Elements */

#adminmenu a.wp-not-current-submenu.menu-top:focus+.wp-submenu, 
.js #adminmenu .opensub .wp-submenu, 
.js #adminmenu .sub-open,
.menupop.hover .ab-sub-wrapper {
	animation: appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
	animation-fill-mode: forwards;
	transform-origin: top left;
	
	@media (prefers-reduced-motion: reduce) {
		animation-duration: 1ms;
	}
}

#wp-admin-bar-my-account.menupop.hover .ab-sub-wrapper {
	transform-origin: top right;
}