/*!
 * @be-partner-labs/ds v1.8.0 — components/tooltip
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/components/tooltip.min.css">
 * npm:  @import "@be-partner-labs/ds/components/tooltip";
 * Docs: https://ds.bepartnerlabs.com/components/tooltip/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-components {
	/* ─── Public API ─────────────────────────────────────────── */
	/*
	 * --tooltip-background:       background color (default: --bp-color-text)
	 * --tooltip-color:    text color (default: --bp-color-bg)
	 * --tooltip-radius:   border radius (default: --bp-radius-md)
	 * --tooltip-size:     font size (default: --bp-text-xs)
	 * --tooltip-padding:  padding (default: --bp-space-1 --bp-space-2)
	 * --tooltip-delay:    show delay (default: 0.3s)
	 * --tooltip-offset:   distance from trigger (default: 0.5rem)
	 * --tooltip-max-width: max bubble width (default: 300px)
	 */

	/* ─── Wrapper ────────────────────────────────────────────── */
	.bp-tooltip-wrap {
		position: relative;
		display: inline-flex;
	}

	/* ─── Tooltip bubble ─────────────────────────────────────── */
	.bp-tooltip {
		--_background: var(--tooltip-background, var(--bp-color-text));
		--_color: var(--tooltip-color, var(--bp-color-bg));
		--_radius: var(--tooltip-radius, var(--bp-radius-md));
		--_size: var(--tooltip-size, var(--bp-text-xs));
		--_padding: var(--tooltip-padding, var(--bp-space-1) var(--bp-space-2));
		--_delay: var(--tooltip-delay, 0.3s);
		--_offset: var(--tooltip-offset, 0.5rem);
		--_max-width: var(--tooltip-max-width, 300px);

		position: absolute;
		bottom: calc(100% + var(--_offset));
		inset-inline-start: 50%;
		translate: -50% 0;
		z-index: 100;

		max-width: var(--_max-width);
		width: max-content;
		padding: var(--_padding);
		background-color: var(--_background);
		color: var(--_color);
		border-radius: var(--_radius);
		font-size: var(--_size);
		line-height: 1.4;
		text-wrap: pretty;
		pointer-events: none;

		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--bp-duration-fast) var(--bp-ease) var(--_delay),
			visibility 0s var(--_delay);
	}

	/* ─── Arrow ──────────────────────────────────────────────── */
	.bp-tooltip::after {
		content: "" / "";
		position: absolute;
		top: 100%;
		inset-inline-start: 50%;
		translate: -50% 0;
		border: 5px solid transparent;
		border-top-color: var(--_background);
	}

	/* ─── Show on hover / focus ──────────────────────────────── */
	.bp-tooltip-wrap:hover .bp-tooltip,
	.bp-tooltip-wrap:focus-within .bp-tooltip {
		opacity: 1;
		visibility: visible;
		transition:
			opacity var(--bp-duration-fast) var(--bp-ease) var(--_delay),
			visibility 0s var(--_delay);
	}

	/* ─── Placement variants ─────────────────────────────────── */
	.bp-tooltip--bottom {
		bottom: auto;
		top: calc(100% + var(--_offset));
	}

	.bp-tooltip--bottom::after {
		top: auto;
		bottom: 100%;
		border-top-color: transparent;
		border-bottom-color: var(--_background);
	}

	.bp-tooltip--start {
		bottom: auto;
		inset-inline-start: auto;
		inset-inline-end: calc(100% + var(--_offset));
		top: 50%;
		translate: 0 -50%;
	}

	.bp-tooltip--start::after {
		top: 50%;
		inset-inline-start: 100%;
		translate: 0 -50%;
		border-top-color: transparent;
		border-inline-start-color: var(--_background);
	}

	.bp-tooltip--end {
		bottom: auto;
		inset-inline-start: calc(100% + var(--_offset));
		top: 50%;
		translate: 0 -50%;
	}

	.bp-tooltip--end::after {
		top: 50%;
		inset-inline-end: 100%;
		inset-inline-start: auto;
		translate: 0 -50%;
		border-top-color: transparent;
		border-inline-end-color: var(--_background);
	}

	/* ─── Anchor Positioning (progressive enhancement) ──────── */
	/*
	 * Opt in per instance by setting --tooltip-anchor to a unique
	 * dashed-ident on the wrapper:
	 *   style="--tooltip-anchor: --my-tip"
	 *
	 * Tried making this automatic via `anchor-scope` (one shared
	 * anchor-name re-scoped per .bp-tooltip-wrap) so no naming would be
	 * needed — but verified in Chrome 150 that anchor-scope combined with
	 * position-try-fallbacks cross-contaminates between sibling tooltip
	 * instances once a fallback position engages: a tooltip can render
	 * anchored to a *different* trigger's position. Reverted to explicit
	 * per-instance names until that engine interaction is reliable.
	 *
	 * When supported, the tooltip escapes overflow:hidden containers
	 * and renders above everything. Falls back to position:absolute.
	 */
	@supports (anchor-name: --x) {
		.bp-tooltip-wrap:has(> [style*="--tooltip-anchor"]) {
			/* Trigger gets anchor-name from the wrapper's custom property */
			> :first-child {
				anchor-name: var(--tooltip-anchor);
			}
		}

		/* Default anchor position: above the trigger */
		@position-try --bp-tooltip-bottom {
			bottom: auto;
			top: calc(anchor(bottom) + var(--_offset));
			translate: -50% 0;
		}

		@position-try --bp-tooltip-start {
			bottom: auto;
			inset-inline-start: auto;
			inset-inline-end: calc(anchor(left) + var(--_offset));
			top: anchor(center);
			translate: 0 -50%;
		}

		@position-try --bp-tooltip-end {
			bottom: auto;
			inset-inline-start: calc(anchor(right) + var(--_offset));
			top: anchor(center);
			translate: 0 -50%;
		}

		.bp-tooltip-wrap:has(> [style*="--tooltip-anchor"]) .bp-tooltip {
			position: fixed;
			position-anchor: var(--tooltip-anchor);
			bottom: calc(anchor(top) + var(--_offset) * -1);
			inset-inline-start: anchor(center);
			translate: -50% -100%;
			/* Try bottom, then sides if tooltip overflows viewport */
			position-try-fallbacks: --bp-tooltip-bottom, --bp-tooltip-end, --bp-tooltip-start;
			/* Remove z-index — top layer handles stacking */
			z-index: unset;
		}

		.bp-tooltip-wrap:has(> [style*="--tooltip-anchor"]) .bp-tooltip--bottom {
			bottom: auto;
			top: calc(anchor(bottom) + var(--_offset));
			translate: -50% 0;
			/* Flip order when consumer prefers bottom */
			position-try-fallbacks: --bp-tooltip-bottom, --bp-tooltip-end, --bp-tooltip-start;
		}
	}

	/* ─── Reduced motion ─────────────────────────────────────── */
	@media (prefers-reduced-motion: reduce) {
		.bp-tooltip {
			transition: none;
		}
	}
}