.xht-tooltip-anchor {
	display: inline-flex;
	min-width: 0;
	max-width: 100%;
	vertical-align: middle;
}

.xht-floating-tooltip {
	--xht-tooltip-background: #0f172a;
	position: fixed;
	z-index: 1000002;
	box-sizing: border-box;
	width: max-content;
	max-width: min(280px, calc(100vw - 24px));
	margin: 0;
	border: 0;
	border-radius: 7px;
	padding: 8px 10px;
	background: var(--xht-tooltip-background);
	color: #fff;
	box-shadow: 0 4px 12px rgb(15 23 42 / 15%);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
	white-space: normal;
	overflow-wrap: anywhere;
	overflow: visible;
	pointer-events: none;
}

.xht-floating-tooltip.is-error {
	--xht-tooltip-background: #dc2626;
}

.xht-floating-tooltip::after {
	position: absolute;
	left: var(--xht-tooltip-arrow-left, 50%);
	width: 8px;
	height: 8px;
	border: 0;
	background: var(--xht-tooltip-background);
	content: "";
	transform: translate(-50%, -50%) rotate(45deg);
}

.xht-floating-tooltip[data-placement="top"]::after {
	top: 100%;
	border-radius: 0 0 2px 0;
}

.xht-floating-tooltip[data-placement="bottom"]::after {
	top: 0;
	border-radius: 2px 0 0 0;
}