.tooltip {
	@include clay-tooltip-variant($cadmin-tooltip);
}

.tooltip-inner {
	@include clay-css($cadmin-tooltip-inner);
}

.tooltip-arrow {
	background-color: $cadmin-tooltip-bg;
	position: absolute;
	transform: rotate(45deg);
}

// Bootstrap 4 Tooltip Positions

%bs-tooltip-top {
	padding: $cadmin-tooltip-arrow-height 0;

	.arrow {
		bottom: 0;

		&::before {
			border-top-color: $cadmin-tooltip-arrow-color;
			border-width: $cadmin-tooltip-arrow-height
				($cadmin-tooltip-arrow-width * 0.5) 0;
			top: 0;
		}
	}
}

%bs-tooltip-right {
	padding: 0 $cadmin-tooltip-arrow-height;

	.arrow {
		height: $cadmin-tooltip-arrow-width;
		left: 0;
		width: $cadmin-tooltip-arrow-height;

		&::before {
			border-right-color: $cadmin-tooltip-arrow-color;
			border-width: ($cadmin-tooltip-arrow-width * 0.5)
				$cadmin-tooltip-arrow-height ($cadmin-tooltip-arrow-width * 0.5)
				0;
			right: 0;
		}
	}
}

%bs-tooltip-bottom {
	padding: $cadmin-tooltip-arrow-height 0;

	.arrow {
		top: 0;

		&::before {
			border-bottom-color: $cadmin-tooltip-arrow-color;
			border-width: 0 ($cadmin-tooltip-arrow-width * 0.5)
				$cadmin-tooltip-arrow-height;
			bottom: 0;
		}
	}
}

%bs-tooltip-left {
	padding: 0 $cadmin-tooltip-arrow-height;

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

		&::before {
			border-left-color: $cadmin-tooltip-arrow-color;
			border-width: ($cadmin-tooltip-arrow-width * 0.5) 0
				($cadmin-tooltip-arrow-width * 0.5) $cadmin-tooltip-arrow-height;
			left: 0;
		}
	}
}

.bs-tooltip-top,
.bs-tooltip-auto[x-placement^='top'] {
	@extend %bs-tooltip-top !optional;
}

.bs-tooltip-right,
.bs-tooltip-auto[x-placement^='right'] {
	@extend %bs-tooltip-right !optional;
}

.bs-tooltip-bottom,
.bs-tooltip-auto[x-placement^='bottom'] {
	@extend %bs-tooltip-bottom !optional;
}

.bs-tooltip-left,
.bs-tooltip-auto[x-placement^='left'] {
	@extend %bs-tooltip-left !optional;
}

// Bottom

.clay-tooltip-bottom,
.clay-tooltip-bottom-left,
.clay-tooltip-bottom-right {
	@include clay-tooltip-variant($cadmin-clay-tooltip-bottom);
}

.clay-tooltip-bottom-left {
	@include clay-tooltip-variant($cadmin-clay-tooltip-bottom-left);
}

.clay-tooltip-bottom-right {
	@include clay-tooltip-variant($cadmin-clay-tooltip-bottom-right);
}

// Left

.clay-tooltip-left,
.clay-tooltip-left-bottom,
.clay-tooltip-left-top {
	@include clay-tooltip-variant($cadmin-clay-tooltip-left);
}

.clay-tooltip-left-bottom {
	@include clay-tooltip-variant($cadmin-clay-tooltip-left-bottom);
}

.clay-tooltip-left-top {
	@include clay-tooltip-variant($cadmin-clay-tooltip-left-top);
}

// Right

.clay-tooltip-right,
.clay-tooltip-right-bottom,
.clay-tooltip-right-top {
	@include clay-tooltip-variant($cadmin-clay-tooltip-right);
}

.clay-tooltip-right-bottom {
	@include clay-tooltip-variant($cadmin-clay-tooltip-right-bottom);
}

.clay-tooltip-right-top {
	@include clay-tooltip-variant($cadmin-clay-tooltip-right-top);
}

// Top

.clay-tooltip-top,
.clay-tooltip-top-left,
.clay-tooltip-top-right {
	@include clay-tooltip-variant($cadmin-tooltip-top);
}

.clay-tooltip-top-left {
	@include clay-tooltip-variant($cadmin-tooltip-top-left);
}

.clay-tooltip-top-right {
	@include clay-tooltip-variant($cadmin-tooltip-top-right);
}