// Begin Mixins

// FIXME: Use a core mixin.
// truncated-text
//
// Add the truncated-text mixin to any element where long text is
// expected, and truncating improves the UX.
// Can be used with .truncated-text(true) to undo text truncation.
//
// Use in Flow, Echo and MobileFrontend extensions.
.truncated-text(@undo: false) when not (@undo) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.truncated-text(@undo: false) when (@undo) {
	white-space: inherit;
	overflow: inherit;
	text-overflow: inherit;
}

/* Echo specific CSS */

#mw-echo-more {
	display: block;
	text-align: center;
	font-size: 13px;
	max-width: 600px;
}

/* Custom header styling for Vector and Monobook skins */
.skin-vector #firstHeading,
.skin-monobook #firstHeading {
	max-width: 600px;
}

/* Special styles to use if we're converting subtitle links into header icons */
#firstHeading {
	.mw-echo-special-header-link {
		display: block;
		height: 19px;
		width: 19px;
	}

	#mw-echo-pref-link {
		float: right;
		margin: 5px 3px;
		/* @embed */
		background-image: url(Preferences.png);
		background-repeat: no-repeat;
		background-position: 0 0;
		filter: alpha(opacity=50);
		opacity: 0.5;

		&:hover {
			filter: alpha(opacity=100);
			opacity: 1.0;
		}
	}

	#mw-echo-moreinfo-link {
		display: inline-block;
		margin: 0 3px;
		/* @embed */
		background-image: url(Help.png);
		background-repeat: no-repeat;
		background-position: 0 0;
		filter: alpha(opacity=50);
		opacity: 0.5;

		&:hover {
			filter: alpha(opacity=100);
			opacity: 1.0;
		}
	}
}

.mw-echo-date-section {
	font-weight: 800;
	font-size: 1.1em;
	text-transform: uppercase;
	border-bottom: 1px solid #C9C9C9;
	margin: 30px 0 5px 50px;
	color: #686868;
	max-width: 550px;
}

ul#mw-echo-special-container {
	list-style: none none;
	padding: 0;
	margin: 30px 0 0 0;
	max-width: 600px;

	// Helper class to be used to force single-line text capped by ellipsis in container
	.mw-echo-title-heading {
		.truncated-text();
	}
}

.mw-echo-notification {
	padding: 15px 35px 10px 0;
}

#mw-echo-special-container {
	.mw-echo-notification {
		background-color: transparent;

		&:hover {
			/* Fallback for IE<=8 */
			background-color: #F6F6F6;
			background-color: rgba(0, 0, 0, 0.035);
		}

		&.mw-echo-unread {
			.mw-echo-title {
				font-weight: bold;
			}
		}
	}
}