/**
 * source: hint-core.scss
 *
 * Defines the basic styling for the tooltip.
 * Each tooltip is made of 2 parts:
 * 	1) body (:after)
 * 	2) arrow (:before)
 * 
 * Classes added:
 * 	1) hint
 */

.hint, [data-hint] {
	position: relative;
	display: inline-block;

	&:before, &:after {
		position: absolute;

		// HACK: Trigger hardware accelerated rendering, otherwise transform was not
		// working on a hidden element
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		
		// HACK: visibility is set to hidden because IE & Opera don't support
		// pointer-events on HTML content yet because of which hovering a hidden tooltip
		// shows the tooltip.
		visibility: hidden;
		opacity: 0;
		z-index: $zIndex;
		// shouldn't receive pointer events, otherwise even hovering tooltip will make it appear
		pointer-events: none;

		-webkit-transition: 0.3s ease;
		-moz-transition: 0.3s ease;
		transition: 0.3s ease;
	}

	&:hover:before, &:hover:after,
	&:focus:before, &:focus:after {
		visibility: visible;
		opacity: 1;
	}

	/**
	 * tooltip arrow
	 */
	&:before {
		content: '';
		position: absolute;
		background: transparent;
		border: $arrowBorderWidth solid transparent;
		// move z-index 1 up than :after so that it shows over box-shadow
		z-index: 1000001;
	}

	/**
	 * tooltip body
	 */
	&:after {
		content: attr(data-hint);
		background: $defaultColor;
		color: white;
		text-shadow: 0 -1px 0px darken($defaultColor, $textShadowDarkenAmount);
		padding: 8px 10px;
		font-size: 12px;
		line-height: 12px;
		white-space: nowrap;
		box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
	}
}