/*
 * Elite Kit — Tooltip extension. Loaded only on a page that has a tooltip.
 *
 * Colours come from the element's settings through two variables; the default,
 * white on near black, is 15:1.
 */
.ekl-tooltip {
	--ekl-tip-bg: #1d2327;
	--ekl-tip-color: #fff;
	--ekl-tip-arrow: 50%;
	position: absolute;
	z-index: 100000;
	box-sizing: border-box;
	padding: 8px 12px;
	border-radius: 6px;
	background: var(--ekl-tip-bg, #1d2327);
	color: var(--ekl-tip-color, #fff);
	font: 400 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-align: left;
	white-space: pre-line;
	overflow-wrap: anywhere;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	animation: ekl-tip-in 0.12s ease-out;
}

.ekl-tooltip[hidden] {
	display: none;
}

.ekl-tooltip[data-arrow="yes"]::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background: var(--ekl-tip-bg, #1d2327);
	transform: rotate(45deg);
}

.ekl-tooltip[data-arrow="yes"][data-position="top"]::after {
	bottom: -5px;
	left: calc(var(--ekl-tip-arrow) - 5px);
}

.ekl-tooltip[data-arrow="yes"][data-position="bottom"]::after {
	top: -5px;
	left: calc(var(--ekl-tip-arrow) - 5px);
}

.ekl-tooltip[data-arrow="yes"][data-position="left"]::after {
	right: -5px;
	top: calc(var(--ekl-tip-arrow) - 5px);
}

.ekl-tooltip[data-arrow="yes"][data-position="right"]::after {
	left: -5px;
	top: calc(var(--ekl-tip-arrow) - 5px);
}

/* The element a note is for shows a ring when the keyboard is on it. */
[data-ekl-tip-reachable]:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

@keyframes ekl-tip-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

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