/*
 * th-site: tooltips for .ghostkit-pro-tooltip[aria-label]; the values of Ghost Kit Pro 3.3.0's shipped CSS.
 * Like Pro's popper, the bubble is a child of <body> and inherits its line-height and alignment.
 * One difference: on narrow screens it is never wider than the viewport minus 10 px on each side.
 */
:root {
	--th-tooltip-word-border: 1px dashed #a5a5a5;
	--th-tooltip-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	--th-tooltip-font-size: 0.9em;
	--th-tooltip-padding: 0.8em 1em;
	--th-tooltip-radius: 0.4em;
	--th-tooltip-background: hsla(0, 0%, 6%, 0.95);
	--th-tooltip-color: #fff;
	--th-tooltip-arrow: 0.4em;
	--th-tooltip-move: 5px;
	--th-tooltip-z-index: 31;
}

.ghostkit-pro-tooltip[aria-label] {
	cursor: pointer;
	border-bottom: var(--th-tooltip-word-border);
}

.th-tooltip {
	position: absolute;
	top: -9999px;
	left: -9999px;
	z-index: var(--th-tooltip-z-index);
	box-sizing: border-box;
	max-width: min(400px, calc(100vw - 20px));
	padding: var(--th-tooltip-padding);
	font-family: var(--th-tooltip-font-family);
	font-size: var(--th-tooltip-font-size);
	font-style: normal;
	font-weight: 400;
	color: var(--th-tooltip-color);
	text-indent: 0;
	text-shadow: none;
	word-break: break-word;
	white-space: pre-line;
	pointer-events: none;
	background-color: var(--th-tooltip-background);
	border-radius: var(--th-tooltip-radius);
	opacity: 0;
	transform: translate(0, calc(-1 * var(--th-tooltip-move)));
	transition: opacity 200ms ease, transform 200ms ease;
}

.th-tooltip[data-placement="bottom"] {
	transform: translate(0, var(--th-tooltip-move));
}

.th-tooltip.th-tooltip--show {
	opacity: 1;
	transform: translate(0, 0);
}

.th-tooltip__arrow {
	position: absolute;
	width: 0;
	height: 0;
	margin-left: calc(-1 * var(--th-tooltip-arrow));
	border: var(--th-tooltip-arrow) solid transparent;
}

.th-tooltip[data-placement="top"] .th-tooltip__arrow {
	top: 100%;
	border-top-color: var(--th-tooltip-background);
}

.th-tooltip[data-placement="bottom"] .th-tooltip__arrow {
	bottom: 100%;
	border-bottom-color: var(--th-tooltip-background);
}

@media (prefers-reduced-motion: reduce) {
	.th-tooltip {
		transition: none;
	}
}