svelte-kit-vice/src/uix/eidos/components/tooltip/tooltip.css

/* ── Content (variant-shared base) ──────────────────────────────────────── */

[data-floating-wrapper]:has(> [data-tooltip-content]) {
	z-index: var(--tooltip-content-z);
}

[data-tooltip-content] {
	--_tooltip-py: var(--tooltip-padding-y-md);
	--_tooltip-px: var(--tooltip-padding-x-md);
	--_tooltip-font-size: var(--tooltip-font-size-md);
	--_tooltip-bg: var(--tooltip-bg);
	--_tooltip-border: var(--tooltip-border);
	--_tooltip-shadow: var(--tooltip-shadow);
	--_tooltip-width: var(--_tooltip-content-width-override, var(--_tooltip-match-anchor-width, auto));
	--_tooltip-max-width: var(--_tooltip-content-max-width-override, var(--tooltip-max-width));
	--_tooltip-max-height: var(
		--_tooltip-content-max-height-override,
		var(--floating-available-height, calc(100dvh - var(--space-4)))
	);

	display: block;
	box-sizing: border-box;
	inline-size: var(--_tooltip-width);
	min-inline-size: var(--_tooltip-content-min-width-override, auto);
	max-inline-size: min(var(--_tooltip-max-width), calc(100vw - var(--space-4)));
	block-size: var(--_tooltip-content-height-override, auto);
	min-block-size: var(--_tooltip-content-min-height-override, auto);
	max-block-size: var(--_tooltip-max-height);
	padding: var(--_tooltip-py) var(--_tooltip-px);
	overflow: auto;
	border: var(--tooltip-border-width) solid var(--_tooltip-border);
	border-radius: var(--tooltip-radius);
	background: var(--_tooltip-bg);
	color: var(--tooltip-color);
	box-shadow: var(--_tooltip-shadow);
	transform-origin: var(--floating-transform-origin, center);
	font-family: var(--tooltip-font-family);
	font-size: var(--_tooltip-font-size);
	font-weight: var(--tooltip-font-weight);
	line-height: var(--tooltip-line-height);
	text-wrap: pretty;
}

/* ── Sizes ──────────────────────────────────────────────────────────────── */

[data-tooltip-content][data-size='sm'] {
	--_tooltip-py: var(--tooltip-padding-y-sm);
	--_tooltip-px: var(--tooltip-padding-x-sm);
	--_tooltip-font-size: var(--tooltip-font-size-sm);
}

[data-tooltip-content][data-size='lg'] {
	--_tooltip-py: var(--tooltip-padding-y-lg);
	--_tooltip-px: var(--tooltip-padding-x-lg);
	--_tooltip-font-size: var(--tooltip-font-size-lg);
}

/* ── Variants ───────────────────────────────────────────────────────────── */

/* `solid` is the default surface — the base block already paints it. */

[data-tooltip-content][data-variant='outline'] {
	--_tooltip-bg: transparent;
	--_tooltip-border: var(--color-border-strong);
	--_tooltip-shadow: none;
}

[data-tooltip-content][data-variant='ghost'] {
	--_tooltip-bg: color-mix(in srgb, var(--color-surface-overlay) 70%, transparent);
	--_tooltip-border: transparent;
	--_tooltip-shadow: none;
	backdrop-filter: blur(8px);
}

/* ── Arrow ──────────────────────────────────────────────────────────────── */

[data-tooltip-arrow] {
	fill: var(--_tooltip-bg, var(--tooltip-bg));
}

/* Outline variant: arrow needs a stroke since the bg is transparent. */
[data-tooltip-content][data-variant='outline'] ~ [data-tooltip-arrow],
[data-tooltip-content][data-variant='outline'] [data-tooltip-arrow] {
	fill: var(--color-surface-default);
	stroke: var(--color-border-strong);
	stroke-width: 1px;
}

/* ── Entrance / exit per anchored side ──────────────────────────────────────
 * Tooltip morfo's data-state values: 'closed' | 'delayed-open' |
 * 'instant-open'. Both open variants should animate in. Soma's Floating
 * layer writes data-side (top/right/bottom/left). 'instant-open' is used
 * for keyboard focus (no entrance) and 'delayed-open' for hover.
 *
 * Distance is smaller than Popover (2px vs 4px) — tooltip is lighter. */

[data-tooltip-content][data-state='delayed-open'][data-side='top'] {
	animation: eidos-tooltip-in-top var(--duration-fast) var(--ease-out) both;
}
[data-tooltip-content][data-state='closed'][data-side='top'] {
	animation: eidos-tooltip-out-top var(--duration-fast) var(--ease-default) both;
}

[data-tooltip-content][data-state='delayed-open'][data-side='bottom'] {
	animation: eidos-tooltip-in-bottom var(--duration-fast) var(--ease-out) both;
}
[data-tooltip-content][data-state='closed'][data-side='bottom'] {
	animation: eidos-tooltip-out-bottom var(--duration-fast) var(--ease-default) both;
}

[data-tooltip-content][data-state='delayed-open'][data-side='right'] {
	animation: eidos-tooltip-in-right var(--duration-fast) var(--ease-out) both;
}
[data-tooltip-content][data-state='closed'][data-side='right'] {
	animation: eidos-tooltip-out-right var(--duration-fast) var(--ease-default) both;
}

[data-tooltip-content][data-state='delayed-open'][data-side='left'] {
	animation: eidos-tooltip-in-left var(--duration-fast) var(--ease-out) both;
}
[data-tooltip-content][data-state='closed'][data-side='left'] {
	animation: eidos-tooltip-out-left var(--duration-fast) var(--ease-default) both;
}

/* instant-open: no entrance — element appears at final position. */
[data-tooltip-content][data-state='instant-open'] {
	opacity: 1;
	transform: none;
}

@keyframes eidos-tooltip-in-top {
	from { opacity: 0; transform: translateY(2px); }
}
@keyframes eidos-tooltip-out-top {
	to { opacity: 0; transform: translateY(2px); }
}

@keyframes eidos-tooltip-in-bottom {
	from { opacity: 0; transform: translateY(-2px); }
}
@keyframes eidos-tooltip-out-bottom {
	to { opacity: 0; transform: translateY(-2px); }
}

@keyframes eidos-tooltip-in-right {
	from { opacity: 0; transform: translateX(-2px); }
}
@keyframes eidos-tooltip-out-right {
	to { opacity: 0; transform: translateX(-2px); }
}

@keyframes eidos-tooltip-in-left {
	from { opacity: 0; transform: translateX(2px); }
}
@keyframes eidos-tooltip-out-left {
	to { opacity: 0; transform: translateX(2px); }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────
 * Honour the user's OS-level preference: tooltips appear instantly with
 * no slide-in / slide-out, just a binary visibility toggle. The exit
 * animation is also short-circuited so the element is removed without a
 * trailing fade. */
@media (prefers-reduced-motion: reduce) {
	[data-tooltip-content][data-state='delayed-open'],
	[data-tooltip-content][data-state='instant-open'],
	[data-tooltip-content][data-state='closed'] {
		animation: none;
	}
}