/*
	Tooltips
	========================================
*/

/* Base class */
.tooltip {
	position: absolute;
	z-index: var(--zindex-tooltip);
	display: block;
	visibility: visible;
	font-size: 11px;
	line-height: 1.4;
	opacity: 0;
}

.tooltip.in {
	opacity: 0.8;
}

.tooltip.top {
	margin-top: -3px;
	padding: 5px 0;
}

.tooltip.right {
	margin-left: 3px;
	padding: 0 5px;
}

.tooltip.bottom {
	margin-top: 3px;
	padding: 5px 0;
}

.tooltip.left {
	margin-left: -3px;
	padding: 0 5px;
}

/* Wrapper for the tooltip content */
.tooltip-inner {
	max-width: 200px;
	padding: 8px;
	color: var(--tooltip-color);
	text-align: center;
	text-decoration: none;
	background-color: var(--tooltip-background);
	border-radius: var(--base-border-radius);
}

/* Arrows */
.tooltip-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}

.tooltip.top .tooltip-arrow {
	bottom: 0;
	left: 50%;
	margin-left: calc(var(--tooltip-arrow-width) * -1);
	border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0;
	border-top-color: var(--tooltip-arrow-color);
}

.tooltip.right .tooltip-arrow {
	top: 50%;
	left: 0;
	margin-top: calc(var(--tooltip-arrow-width) * -1);
	border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0;
	border-right-color: var(--tooltip-arrow-color);
}

.tooltip.left .tooltip-arrow {
	top: 50%;
	right: 0;
	margin-top: calc(var(--tooltip-arrow-width) * -1);
	border-width: var(--tooltip-arrow-width) 0 var(--tooltip-arrow-width) var(--tooltip-arrow-width);
	border-left-color: var(--tooltip-arrow-color);
}

.tooltip.bottom .tooltip-arrow {
	top: 0;
	left: 50%;
	margin-left: calc(var(--tooltip-arrow-width) * -1);
	border-width: 0 var(--tooltip-arrow-width) var(--tooltip-arrow-width);
	border-bottom-color: var(--tooltip-arrow-color);
}