/* ==========================================================================
   LIEPS Tooltip Bubble
   ========================================================================== */

.lieps-tooltip {
	--tooltip-tail-width: 18px;
	--tooltip-tail-height: 18px;
	--tooltip-tail-inset: 33px;

	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;

	max-width: min(22rem, calc(100vw - 1.5rem));
	padding: 0.65rem 1rem;

	color: var(--bs-white);
	background:
		var(
			--brand-color-scarlet-flame,
			var(--bs-dark)
		);


	border-radius: 1.15rem;

	box-shadow:
		0 0.45rem 1.4rem
		rgba(0, 0, 0, 0.18);

	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;

	pointer-events: none;

	opacity: 0;
	visibility: hidden;

	transform: scale(0.94);

	transition:
		opacity 0.15s ease,
		transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0.22s;

	will-change:
		left,
		top,
		transform,
		opacity;
}


.lieps-tooltip.is-visible {
	opacity: 1;
	visibility: visible;

	transform: scale(1);

	transition:
		opacity 0.15s ease,
		transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s;
}


/* ==========================================================================
   Tail
   ========================================================================== */

.lieps-tooltip::before {
	content: "";

	position: absolute;
	z-index: -1;

	width: var(--tooltip-tail-width);
	height: var(--tooltip-tail-height);

	background: inherit;

	pointer-events: none;
}


/* ==========================================================================
   UNTEN + RECHTS

   Tooltip läuft von der Maus nach rechts.
   Spitze sitzt fest 33px vom linken Container-Rand.
   ========================================================================== */

.lieps-tooltip.is-below-right {
	transform-origin:
		var(--tooltip-tail-inset)
		0;
}

.lieps-tooltip.is-below-right::before {
	top:
		calc(
			var(--tooltip-tail-height) * -1
		);

	left:
		var(--tooltip-tail-inset);

	clip-path:
		polygon(
			0 0,
			100% 100%,
			0 100%
		);
}


/* ==========================================================================
   UNTEN + LINKS

   Tooltip läuft von der Maus nach links.
   Spitze sitzt fest 33px vom rechten Container-Rand.
   ========================================================================== */

.lieps-tooltip.is-below-left {
	transform-origin:
		calc(
			100% -
			var(--tooltip-tail-inset)
		)
		0;
}

.lieps-tooltip.is-below-left::before {
	top:
		calc(
			var(--tooltip-tail-height) * -1
		);

	right:
		var(--tooltip-tail-inset);

	clip-path:
		polygon(
			100% 0,
			100% 100%,
			0 100%
		);
}


/* ==========================================================================
   OBEN + RECHTS
   ========================================================================== */

.lieps-tooltip.is-above-right {
	transform-origin:
		var(--tooltip-tail-inset)
		100%;
}

.lieps-tooltip.is-above-right::before {
	bottom:
		calc(
			var(--tooltip-tail-height) * -1
		);

	left:
		var(--tooltip-tail-inset);

	clip-path:
		polygon(
			0 100%,
			0 0,
			100% 0
		);
}


/* ==========================================================================
   OBEN + LINKS
   ========================================================================== */

.lieps-tooltip.is-above-left {
	transform-origin:
		calc(
			100% -
			var(--tooltip-tail-inset)
		)
		100%;
}

.lieps-tooltip.is-above-left::before {
	right:
		var(--tooltip-tail-inset);

	bottom:
		calc(
			var(--tooltip-tail-height) * -1
		);

	clip-path:
		polygon(
			100% 100%,
			0 0,
			100% 0
		);
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 575.98px) {
	.lieps-tooltip {
		--tooltip-tail-inset: 24px;

		max-width:
			calc(100vw - 1.5rem);

		padding:
			0.7rem
			0.9rem;

		font-size: 0.9rem;
	}
}


@media (prefers-reduced-motion: reduce) {
	.lieps-tooltip,
	.lieps-tooltip.is-visible {
		transition: none;
		transform: none;
	}
}