@keyframes menuButtonScale {
	0% {
		transform: scaleY(100%);
	}
	50% {
		transform: scaleY(110%);
	}
	100% {
		transform: scaleY(100%);
	}
}

#top-bar .menu > * {
	background-image: linear-gradient(to right, var(--top-bar-menu-bg-hover) 0%, var(--top-bar-menu-bg-hover) 45%, var(--top-bar-menu-bg-normal) 55%, var(--top-bar-menu-bg-normal) 100%);
	background-size: 300%;
	background-position: 100% 0;
	transition: background-position 0.5s ease;
	background-repeat: no-repeat;
}

#top-bar .menu > *:hover {
	background-position: 0 0;
	animation: 0.25s ease-out 0s 1 menuButtonScale;
}

#top-bar .selected {
	background-image: linear-gradient(to right, var(--top-bar-menu-selected-bg-hover) 0%, var(--top-bar-menu-selected-bg-hover) 33%, var(--top-bar-menu-selected-bg-normal) 67%, var(--top-bar-menu-selected-bg-normal) 100%);
	background-size: 300%;
	background-position: 100% 0;
	transition: background-position 0.5s ease;
	background-repeat: no-repeat;
}

#top-bar .selected:hover {
	background-position: 0 0;
	animation: none !important;
}

@media screen and (max-width: 850px) {
	#top-bar .menu > * {
		background-image: none !important;
		transition: none !important;
	}
	
	#top-bar .selected {
		background-image: none !important;
		transition: none !important;
	}

	#top-bar .menu > *:hover {
		animation: none !important;
	}
}