@keyframes wcfPopover {
	0%   { visibility: visible; transform: translateY(-20px); opacity: 0; }
	100% { visibility: visible; transform: translateY(0);     opacity: 1; }
}

@keyframes wcfPopoverOut {
	0%   { visibility: visible; transform: translateY(0);     opacity: 1; }
	100% { visibility: hidden;  transform: translateY(-20px); opacity: 0; }
}

/* outer element containing both the pointer and content element */
.popover {
	animation: wcfPopoverOut .3s;
	animation-fill-mode: forwards;
	background-color: $wcfContentBackground;
	border-radius: 2px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	position: absolute;
	top: 0;
	vertical-align: middle;
	visibility: hidden;
	width: 500px !important;
	z-index: 500;
	
	&.active {
		animation: wcfPopover .3s;
		animation-fill-mode: forwards;
	}
	
	&.forceHide {
		animation: 0;
		visibility: hidden;
	}
	
	> .elementPointer {
		display: none;
	}
	
	@include screen-sm-down {
		display: none;
	}
}

/* actual popover content */
.popoverContent {
	background-color: $wcfContentBackground;
	border-radius: 3px;
	color: $wcfContentText;
	padding: 15px;
	
	> div {
		max-height: 290px;
		min-height: 36px;
		overflow: hidden;
	}
	
	a {
		color: $wcfContentLink;
		
		&:hover {
			color: $wcfContentLinkActive;
		}
	}
	
	/* Workaround for the partially active mobile navigation on desktop devices. See #2791 */
	.jsMobileButtonGroupNavigation > .dropdownLabel {
		display: none;
	}
}