@import '../../../minerva.less/minerva.variables';

/**
 * Ambox classes are nested in a top-level class
 * for the page issues A/B test.
 * This class is appended to the DOM via JS
 **/

@amboxPadding: 8px;
@amboxIconPadding: @amboxPadding * 4;
@amboxBackground: @colorGray15;

.ambox,
// Be more specific than .content table styles in Minerva
table.ambox {
	display: none;
	margin: 0;
}

// Will show FOUC on mobile
.issues-group-B {
	.ambox {
		display: block;
	}
}

.client-js .ambox {
	cursor: pointer;
	font-size: 0.8em;
	width: 100%;
	background: @amboxBackground;
	color: @colorGray5;

	tbody {
		display: table;
		width: 100%;
	}

	// Assuming that most ambox templates wrap content in this element.
	// See https://en.wikipedia.org/w/index.php?title=Module:Message_box&action=raw (search for 'mbox-text-span').
	.mbox-text-span {
		max-height: @contentLineHeight * 2em;
		// All will have this height (approx 2 lines) even if a single line e.g. {{dictdef}} when on mobile.
		// Overriden later in tablet styles.
		height: @contentLineHeight * 2em;
		overflow: hidden;
	}

	// Wrestle with inline styles that editors may place on elements inside the ambox
	div {
		// e.g. on mw-collapsible inside Multiple issues template
		margin: 0 !important;
		// e.g. on Template:Expand Russian
		padding: 0 !important;
	}

	td {
		position: relative;
		padding: @amboxPadding @amboxPadding @amboxPadding @amboxIconPadding;
	}

	// All text should be treated the same
	b {
		font-weight: inherit;
	}

	// Hide links in new treatment
	a {
		color: inherit !important;
		&:hover {
			text-decoration: none;
		}
	}

	small,
	.hide-when-compact,
	// Template:Expand Russian
	.mw-collapsible-content,
	// Remove empty leftmost column when present (.mbox-empty-cell)
	// and .verbose and any hr tags that might be present in the ambox
	// See https://en.wikipedia.org/w/index.php?
	//   title=Special:WhatLinksHere/Template:Proposed_deletion_notify
	// (https://phabricator.wikimedia.org/T197265)
	.mbox-empty-cell,
	hr,
	.verbose,
	// nested amboxes (multiple issues)
	table,
	.mbox-image {
		display: none;
	}

	.mw-ui-icon {
		position: absolute;
		left: -@amboxPadding;
	}

	.mw-ui-icon:before {
		.background-size(75%, auto);
	}

	.ambox-learn-more {
		color: @linkColor;
		position: absolute;
		right: @amboxPadding;
		bottom: @amboxPadding;
		z-index: 1;
		line-height: @contentLineHeight; // sets height for fade & aligns "learn more" to ambox text.
		/* creates a fade under the "learn more" button to avoid overlapping text. */
		&:before {
			content: '';
			position: absolute;
			z-index: -1;
			bottom: 0;
			right: 0;
			width: 100%; // width & height defined by length of "learn more".
			height: 100%;
			box-sizing: content-box; // explicitly setting box-sizing so padding extends beyond 100%.
			padding-left: 4em;
			background: -webkit-linear-gradient( left, fade( @amboxBackground, 0 ) 0, @amboxBackground 3em );
			background: -moz-gradient( left, fade( @amboxBackground, 0 ) 0, @amboxBackground 3em );
			background: linear-gradient( to right, fade( @amboxBackground, 0 ) 0, @amboxBackground 3em );
		}
	}

	@media screen and ( min-width: @width-breakpoint-tablet ) {
		.mbox-text-span {
			height: auto;
			margin-bottom: @amboxPadding * 3 !important; // important offsets `.ambox div { margin:0!important}` which offsets inline styles.
		}
		.ambox-learn-more {
			left: @amboxIconPadding;
			right: auto;
			background: none;
		}
	}

}