/**
 * Hover/focus tooltips (wrap disabled controls so pointer events reach the host).
 */

.dc-tooltip {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
}

.dc-tooltip__text {
	position: absolute;
	z-index: 20;
	bottom: calc(100% + 0.375rem);
	left: 50%;
	transform: translateX(-50%);
	padding: var(--dc-space-2) var(--dc-space-3);
	border-radius: var(--dc-radius-sm);
	background: var(--dc-colour-text);
	color: var(--dc-colour-surface);
	font-size: var(--dc-font-size-xs);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: var(--dc-shadow-md);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--dc-transition), visibility var(--dc-transition);
}

.dc-tooltip__text::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--dc-colour-text);
}

.dc-tooltip:hover .dc-tooltip__text,
.dc-tooltip:focus-within .dc-tooltip__text {
	opacity: 1;
	visibility: visible;
}

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