/* Hallmark · component: tooltip · genre: modern-minimal · theme: monoline/ui */
@layer theme, base, components, utilities;

@layer components {
	.ml-tooltip__content {
		z-index: var(--z-tooltip);
		max-inline-size: min(18rem, calc(100vw - var(--ml-space-8)));
		max-block-size: var(--radix-tooltip-content-available-height);
		padding: var(--ml-space-1-5) var(--ml-space-2-5);
		border: var(--border-thin) solid var(--border);
		border-radius: var(--radius-md);
		background: var(--primary);
		color: var(--primary-foreground);
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		line-height: var(--leading-snug);
		box-shadow: var(--shadow-lg);
		transform-origin: var(--radix-tooltip-content-transform-origin);
		animation: ml-floating-enter var(--duration-fast) var(--ease-out-expo) both;
	}
	.ml-tooltip__content[data-side="top"] {
		animation-name: ml-floating-slide-top-enter;
	}
	.ml-tooltip__content[data-side="bottom"] {
		animation-name: ml-floating-slide-bottom-enter;
	}
	.ml-tooltip__content[data-side="left"] {
		animation-name: ml-floating-slide-left-enter;
	}
	.ml-tooltip__content[data-side="right"] {
		animation-name: ml-floating-slide-right-enter;
	}
	.ml-tooltip__content[data-state="closed"] {
		animation: ml-floating-exit var(--duration-micro) var(--ease-in) both;
	}
	.ml-tooltip__content[data-state="closed"][data-side="top"] {
		animation-name: ml-floating-slide-top-exit;
	}
	.ml-tooltip__content[data-state="closed"][data-side="bottom"] {
		animation-name: ml-floating-slide-bottom-exit;
	}
	.ml-tooltip__content[data-state="closed"][data-side="left"] {
		animation-name: ml-floating-slide-left-exit;
	}
	.ml-tooltip__content[data-state="closed"][data-side="right"] {
		animation-name: ml-floating-slide-right-exit;
	}
	.ml-tooltip__arrow {
		display: block;
		fill: var(--primary);
		stroke: var(--border);
	}
	/* Mask the closed SVG base so the surface border flows into the arrow. */
	.ml-tooltip__content > span:has(> .ml-tooltip__arrow) {
		z-index: 1;
	}
	.ml-tooltip__content > span:has(> .ml-tooltip__arrow)::after {
		position: absolute;
		inset-block-start: calc(0px - var(--border-thin));
		inset-inline: var(--border-thin);
		block-size: calc(var(--border-thin) + var(--border-thin));
		background: var(--primary);
		content: "";
		pointer-events: none;
	}
	@media (prefers-reduced-motion: reduce) {
		.ml-tooltip__content {
			animation: none;
		}
	}
}