@import 'mediawiki.mixins';
@import 'flow.colors';
@import 'flow.helpers';

/*
Tooltips

<h3>Guidelines</h3>

Requires the following markup at minimum: <span class="mw-ui-tooltip">CONTENT<span class="mw-ui-tooltip-triangle"></span></span>
An additional class should be added relating the triangle to the direction of the content: mw-ui-tooltip-DIRECTION, where direction is one of up, down, left, or right.
Adding to this could be an extra class: mw-ui-tooltip-inverted, which moves the tooltip and triangle to the opposing side. This used when the tooltip would go off the right of the viewport, and instead aligns to the right of the viewport.
Finally, a context class can be given to assign it a color (eg. mw-ui-progressive).

This is intended to be used with JavaScript, but does not have to be. With JS, you can directly bind the element to given X-Y coords for an element.

Styleguide 4.0.
 */
.flow-ui-tooltip {
	position: relative;
	top: 1px;
	display: inline-block;
	padding: .5em;
	background: @colorWhite;
	*background: @colorOffWhite; // ie6
	color: @colorText;
	word-wrap: break-word;
	border-radius: 3px;
	.box-shadow( ~"0 2px 0 0 @{colorGrayLight}, 0 0 1px 0 @{colorGrayLight}" );
	opacity: .9;
	z-index: 99;

	a {
		// FIXME: Due to the lack of a fix for bug 66746 this link is treated as an external link.
		// Yes Shahyar !important is bad
		// but the alternative css hacks that would be needed here are even more horrible.
		color: #fff !important;
		font-weight: bold;
	}

	font-size: .875em; // not inherited from div#bodyContent, as we insert at body

	#bodyContent & {
		font-size: 1em;
	}

	.flow-ui-tooltip-triangle {
		position: absolute;
		overflow: hidden;
		pointer-events: none;

		// Fix offset-by-1px bug
		z-index: 1;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;

		&:after {
			content: "";
			position: absolute;
			z-index: 1;
			width: 1em;
			height: 1em;
			background: @colorWhite;
			*background: @colorOffWhite; //ie6
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
		}
	}

	// mw-ui-tooltip helpers to cleanly set triangle location
	// The first four are because less.php doesn't support "@{var}: n" syntax
	.flow-ui-tooltip-triangle-location-horizontal( top ) { top: -1em; }
	.flow-ui-tooltip-triangle-location-horizontal( bottom ) { bottom: -1em; }
	.flow-ui-tooltip-triangle-location-vertical( left ) { left: -1em; }
	.flow-ui-tooltip-triangle-location-vertical( right ) { right: -1em; }
	// up-down
	.flow-ui-tooltip-triangle-location( horizontal, @location ) {
		width: 2em;
		height: 1em;
		left: 50%;
		.flow-ui-tooltip-triangle-location-horizontal( @location );
		margin-left: -1em;
	}
	// left-right
	.flow-ui-tooltip-triangle-location( vertical, @location ) {
		width: 1em;
		height: 2em;
		.flow-ui-tooltip-triangle-location-vertical( @location );
		top: 50%;
		margin-top: -1em;
	}

	// triangle on top
	&.flow-ui-tooltip-up {
		margin-top: .75em;

		.flow-ui-tooltip-triangle {
			.flow-ui-tooltip-triangle-location( horizontal, top );

			&:after {
				top: .5em;
				left: .5em;
				.box-shadow( ~"0 0 1px 0 @{colorGrayLight}" );
			}
		}
	}

	// triangle on bottom
	&.flow-ui-tooltip-down {
		margin-bottom: .75em;

		.flow-ui-tooltip-triangle {
			.flow-ui-tooltip-triangle-location( horizontal, bottom );

			&:after {
				top: -.5em;
				left: .5em;
				.box-shadow( ~"0 -1.5px 0 1.5px @{colorGrayLight}, 0 0 1px 0 @{colorGrayLight}" );
			}
		}
	}

	// triangle at left
	&.flow-ui-tooltip-left {
		margin-left: .75em;

		.flow-ui-tooltip-triangle {
			.flow-ui-tooltip-triangle-location( vertical, left );

			&:after {
				margin-top: -1px;
				top: .5em;
				right: -.5em;
				.box-shadow( ~"1.5px 0 0 1.5px @{colorGrayLight}, 0 0 1px 0 @{colorGrayLight}" );
			}
		}
	}

	// triangle at right
	&.flow-ui-tooltip-right {
		margin-left: -.75em;

		.flow-ui-tooltip-triangle {
			.flow-ui-tooltip-triangle-location( vertical, right );

			&:after {
				margin-top: -1px;
				top: .5em;
				left: -.5em;
				.box-shadow( ~"0 1.5px 0 1.5px @{colorGrayLight}, 0 0 1px 0 @{colorGrayLight}" );
			}
		}
	}

	.flow-ui-tooltip-color( @backgroundColor ) {
		@backgroundColorDarkened: darken( @backgroundColor, @colorDarkenPercentage );

		background: @backgroundColor;
		.box-shadow( ~"0 2px 0 0 @{backgroundColorDarkened}" );
		color: @colorWhite;

		.flow-ui-tooltip-triangle:after {
			background: @backgroundColor;
		}
		&.flow-ui-tooltip-down .flow-ui-tooltip-triangle:after {
			.box-shadow( ~"0 -2px 0 2px @{backgroundColorDarkened}" );
		}
		&.flow-ui-tooltip-left .flow-ui-tooltip-triangle:after {
			.box-shadow( ~"2px 0 0 2px @{backgroundColorDarkened}" );
		}
		&.flow-ui-tooltip-right .flow-ui-tooltip-triangle:after {
			.box-shadow( ~"0 2px 0 2px @{backgroundColorDarkened}" );
		}
	}

	// Content for tooltips generated by JS
	.flow-ui-tooltip-content {
		display: block;
		max-width: 360px;
	}

	// Don't apply these classes on IE6
	&[class] {
		&.mw-ui-progressive {
			.flow-ui-tooltip-color( @colorProgressive );
			.mw-ui-icon {
				fill: @colorProgressive;
			}
		}
		&.mw-ui-constructive {
			.flow-ui-tooltip-color( @colorConstructive );
			.mw-ui-icon {
				fill: @colorConstructive;
			}
		}
		&.mw-ui-destructive {
			.flow-ui-tooltip-color( @colorDestructive );
			.mw-ui-button.mw-ui-destructive.mw-ui-quiet:hover, .mw-ui-button.mw-ui-destructive.mw-ui-quiet:focus span {
				fill: @colorDestructive;
			}
		}
		&.flow-ui-tooltip-small {
			font-size: .75em;

			.flow-ui-tooltip-content {
				max-width: 240px;
			}
		}
		&.flow-ui-tooltip-large {
			max-width: 100%;

			.flow-ui-tooltip-content {
				max-width: 100%;
			}
		}
	}
}

// Block-level tooltip
.flow-ui-tooltip-block {
	.box-sizing(border-box);
	width: 100%;
}