@import '../less/utilities/animations.less';
@import '../less/variables/colors.less';
@import '../less/variables/z-index.less';

@tooltip-background-color: rgba(0,0,0,0.8);

// The tooltip should only be presented on devices that support a hover interaction.
@media (hover) {
	.c-hover-tooltip {
		background-color: @tooltip-background-color;
		border-radius: 4px;
		color: #fff;
		display: none;
		font-size: 12px;
		opacity: 0;
		padding: 5px 10px;
		position: absolute;
		word-wrap: break-word;
		z-index: @z-index-hover-tooltip;

		// Added to the tooltip to show it
		&.c-hover-tooltip--visible {
			animation: fadeInToInlineBlock 0.15s linear;
			display: inline-block;
			opacity: 1;
		}

		&.left.flush-arrow {
			border-radius: 4px 4px 4px 0;
		}

		&.right.flush-arrow {
			border-radius: 4px 4px 0 4px;
		}

		// The triangles:
		&::after {
			border-color: @tooltip-background-color transparent;
			border-style: solid;
			content: '';
			display: inline-block;
			position: absolute;
		}

		// Top positioned tooltip -> arrows should be on the bottom
		&.top::after {
			border-width: 4px 4px 0 4px;
			top: 100%;
		}

		// Top positioned tooltip -> arrows should be on the top
		&.bottom::after {
			border-width: 0 4px 4px 4px;
			top: -4px;
		}

		// Left positioned tooltip -> arrows should be near the left edge
		&.left::after {
			left: 10px;
		}

		&.left.flush-arrow::after {
			border-color: @tooltip-background-color transparent transparent @tooltip-background-color;
			border-width: 3px;
			left: 0;
		}

		// Right positioned tooltip -> arrows should be near the right edge
		&.right::after {
			right: 10px;
		}

		&.right.flush-arrow::after {
			border-color: @tooltip-background-color @tooltip-background-color transparent transparent;
			border-width: 3px;
			right: 0;
		}

		// Center positioned tooltip
		&.center::after {
			left: 50%;
			transform: translate(-50%, 0);
		}
	}
}