@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: auto;
	background: @amboxBackground;
	color: @colorGray5;
	margin-bottom: 1px;

	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').
	// https://phabricator.wikimedia.org/T206887 suggests .mbox-text-div is also needed.
	.mbox-text-div,
	.mbox-text-span {
		display: block;
		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;
		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ) !important;

		&:hover,
		&:focus {
			text-decoration: none;
			outline: inherit;
		}
	}

	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%;
	}

	.ambox-learn-more {
		color: @linkColor;
		position: absolute;
		right: @amboxPadding;
		bottom: @amboxPadding;
		z-index: @z-indexBase;
		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: @z-indexBase - 1; // set z-index 1 below the parent element.
			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-div,
		.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: 0;
			background: none;

			// Move blur to far right last line
			// https://phabricator.wikimedia.org/T197931#4475197
			&:before {
				top: unit( -@contentLineHeight, em );
				width: 10px;
			}
		}
	}
}