$tooltipColor: #121212;
$tooltipArrowSize: 6px;
$tooltipArrowOffset: -($tooltipArrowSize - 1);

.tooltip {
	background-color: $tooltipColor;
	border-radius: 4px;
	left: 50%;
	position: absolute;
	top: $tooltipArrowOffset;
	z-index: 1;
}

.tooltipLeftAlign {
	left: 0;
}

.tooltipShadow {
	color: $black;
}

.text {
	color: $white;
	padding: 12px 16px;
}

.arrow {
	border-color: $tooltipColor transparent transparent transparent;
	border-style: solid;
	border-width: $tooltipArrowSize $tooltipArrowSize 0 $tooltipArrowSize;
	bottom: $tooltipArrowOffset;
	height: 0;
	left: 50%;
	margin-left: -$tooltipArrowSize;
	position: absolute;
	top: 100%;
	width: 0;
}

.arrowLeftAlign {
	left: 16px;
}