/*!
 * VisualEditor MediaWiki UserInterface education popup tool styles.
 *
 * @copyright 2011-2019 VisualEditor Team and others; see AUTHORS.txt
 * @license The MIT License (MIT); see LICENSE.txt
 */

.ve-ui-educationPopup {
	cursor: pointer;
}

.ve-ui-pulsatingDot,
.ve-ui-stillDot {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 1;
	border-radius: 50%;
	background-color: #36c;
}

.ve-ui-pulsatingDot {
	width: 36px;
	height: 36px;
	margin-bottom: -18px;
	margin-left: -18px;
	opacity: 0;
	-webkit-animation: pulse 3s ease-out;
	-moz-animation: pulse 3s ease-out;
	animation: pulse 3s ease-out;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.ve-ui-stillDot {
	/* Use whole pixel values to improve rendering (T214203) */
	width: 12px;
	height: 12px;
	margin-bottom: -6px;
	margin-left: -6px;
}

.ve-ui-educationPopup-shield {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.oo-ui-widget-disabled .ve-ui-pulsatingDot,
.oo-ui-widget-disabled .ve-ui-stillDot {
	display: none;
}

.ve-ui-educationPopup-dismiss {
	margin-top: 0.5em;
}

.ve-ui-educationPopup-header {
	margin-bottom: 1em;
}

.ve-ui-educationPopup .oo-ui-popupWidget {
	/* Appear above local dialogs, e.g. toolbar dialog */
	z-index: 3;
}

.ve-ui-educationPopup .oo-ui-popupWidget-body {
	padding: 1em;
}

.ve-ui-educationPopup .oo-ui-popupWidget-body p {
	line-height: 1.2em;
}

@-webkit-keyframes pulse {
	0% {
		transform: scale( 0 );
		opacity: 0;
	}

	25% {
		transform: scale( 0 );
		opacity: 0.1;
	}

	50% {
		transform: scale( 0.1 );
		opacity: 0.3;
	}

	75% {
		transform: scale( 0.5 );
		opacity: 0.5;
	}

	100% {
		transform: scale( 1 );
		opacity: 0;
	}
}

@-moz-keyframes pulse {
	0% {
		transform: scale( 0 );
		opacity: 0;
	}

	25% {
		transform: scale( 0 );
		opacity: 0.1;
	}

	50% {
		transform: scale( 0.1 );
		opacity: 0.3;
	}

	75% {
		transform: scale( 0.5 );
		opacity: 0.5;
	}

	100% {
		transform: scale( 1 );
		opacity: 0;
	}
}

@keyframes pulse {
	0% {
		transform: scale( 0 );
		opacity: 0;
	}

	25% {
		transform: scale( 0 );
		opacity: 0.1;
	}

	50% {
		transform: scale( 0.1 );
		opacity: 0.3;
	}

	75% {
		transform: scale( 0.5 );
		opacity: 0.5;
	}

	100% {
		transform: scale( 1 );
		opacity: 0;
	}
}