// Base class
.hoo-tooltip{
	// 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-size: $tooltip-font-size;

	// position: absolute;
	z-index: $zindex-tooltip;

	display: block;

	margin: $tooltip-margin;
	// Allow breaking very long words so they don't overflow the tooltip's bounds

	word-wrap: break-word;

	opacity: 0;



	&.show{
		opacity: $tooltip-opacity;
	}

	.arrow{
		position: absolute;

		display: block;

		width: $tooltip-arrow-width;
		height: $tooltip-arrow-height;

		&::before{
			position: absolute;

			content: "";

			border-style: solid;
			border-color: transparent;
		}
	}


	&-top{
		padding: $tooltip-arrow-height 0;

		.arrow{
			bottom: 0;
			left: calc(50% - 12.8px);

			&::before{
				top: 0;

				border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
				border-top-color: $tooltip-arrow-color;
			}
		}
	}

	&-right{
		padding: 0 $tooltip-arrow-height;

		.arrow{
			left: 0;

			width: $tooltip-arrow-height;
			height: $tooltip-arrow-width;

			&::before{
				right: 0;

				border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
				border-right-color: $tooltip-arrow-color;
			}
		}
	}

	&-bottom{
		padding: $tooltip-arrow-height 0;

		.arrow{
			top: 0;

			&::before{
				bottom: 0;

				border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
				border-bottom-color: $tooltip-arrow-color;
			}
		}
	}

	&-left{
		padding: 0 $tooltip-arrow-height;

		.arrow{
			right: 0;

			width: $tooltip-arrow-height;
			height: $tooltip-arrow-width;

			&::before{
				left: 0;

				border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
				border-left-color: $tooltip-arrow-color;
			}
		}
	}
}

.bs-tooltip-auto{
	&[x-placement^="top"]{
		@extend .hoo-tooltip-top;
	}

	&[x-placement^="right"]{
		@extend .hoo-tooltip-right;
	}

	&[x-placement^="bottom"]{
		@extend .hoo-tooltip-bottom;
	}

	&[x-placement^="left"]{
		@extend .hoo-tooltip-left;
	}
}

// Wrapper for the tooltip content
.hoo-tooltip-content{
	max-width: $tooltip-max-width;
	padding: $tooltip-padding-y $tooltip-padding-x;

	text-align: center;

	color: $tooltip-color;
	border-radius: 2px;
	background-color: $tooltip-bg;
	// @include border-radius($tooltip-border-radius);
  @include elevation(8);
}