$tooltipBgColor: $co-gray-80;
$tooltipArrowWidth: 1rem;
$tooltipArrowHeight: 1rem;

// Base class
.tooltip {
	position: absolute;
	z-index: $z-index-tooltip;
	display: block;
	margin: 0;
	// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
	// So reset our font and text properties to avoid inheriting weird values.
	// @include reset-text();
	font-family: $font-family-base;
    font-style: normal;
    font-weight: $font-weight-base;
    line-height: $line-height-base;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;

	font-size: $font-size-xsmall;
	// Allow breaking very long words so they don't overflow the tooltip's bounds
	word-wrap: break-word;
	opacity: 0;

	filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));

	&.show {
		opacity: 1;
		transition-delay: .1s;
	}

	.tooltip-arrow {
		position: absolute;
		display: block;
		width: $tooltipArrowWidth;
		height: $tooltipArrowHeight;

		&::before {
			position: absolute;
			content: "";
			border-color: transparent;
			border-style: solid;
		}
	}

	&-ulinks {
		z-index: $z-index-header - 1;
	}
}

.bs-tooltip-top {
	padding: $tooltipArrowHeight 0;

	.tooltip-arrow {
		bottom: 0;

		&::before {
			top: 0;
			border-width: $tooltipArrowHeight $tooltipArrowWidth 0;
			border-top-color: $tooltipBgColor;
		}
	}
}

.bs-tooltip-end {
	padding: 0 $tooltipArrowWidth;

	.tooltip-arrow {
		left: 0;
		width: .4rem;
		height: .8rem;

		&::before {
			right: 0;
			border-width: $tooltipArrowHeight $tooltipArrowWidth 0 0;
			border-right-color: $tooltipBgColor;
		}
	}
}

.bs-tooltip-bottom {
	padding: $tooltipArrowHeight 0;

	.tooltip-arrow {
		top: 0;

		&::before {
			bottom: 0;
			border-width: 0 $tooltipArrowWidth $tooltipArrowHeight;
			border-bottom-color: $tooltipBgColor;
		}
	}
}

.bs-tooltip-start {
	padding: 0 $tooltipArrowWidth;

	.tooltip-arrow {
		right: 0;
		width: $tooltipArrowWidth;
		height: $tooltipArrowHeight;

		&::before {
			left: 0;
			border-width: $tooltipArrowHeight 0 $tooltipArrowHeight $tooltipArrowWidth;
			border-left-color: $tooltipBgColor;
		}
	}
}

.bs-tooltip-auto {
	&[data-popper-placement^="top"] {
		@extend .bs-tooltip-top;
	}
	&[data-popper-placement^="right"] {
		@extend .bs-tooltip-end;
	}
	&[data-popper-placement^="bottom"] {
		@extend .bs-tooltip-bottom;
	}
	&[data-popper-placement^="left"] {
		@extend .bs-tooltip-start;
	}
}

// Wrapper for the tooltip content
.tooltip-inner {
	max-width: 300px;
	padding: $sp-3 $sp-4;
	color: $text-color;
	text-align: left;
	background-color: $tooltipBgColor;
	border-radius: $border-radius-1;
	p,h1,h2,h3,h4,h5,h6 {
		margin: 0;
	}
	a {
		color: $text-color;
	}
}