*,
*::before,
*::after {
	box-sizing: border-box;
}

:host,
.tooltip,
.tooltip__slot {
	width: fit-content;
}

.tooltip {
	position: relative;
}

.tooltip__slot {
	padding: var(--g-spacing-sm);
	margin: calc(-1 * var(--g-spacing-sm));
	/* Anchor name will be set via JavaScript to include unique ID */
}

.tooltip__content {
	display: none;
	width: fit-content;
	margin: 0;
	max-width: 100%;
	min-width: 6rem;
	z-index: 100;
	border-radius: var(--g-border-radius-md);
	padding: 0.6em 1em;
	font-size: var(--g-typography-font-size-xs);
	line-height: 1;
	color: var(--g-color-primary-900);
	background-color: var(--g-color-primary-100);
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.12),
		0 1px 2px rgba(0, 0, 0, 0.24);
	user-select: none;
	text-align: center;
	opacity: 0;
	transition: opacity 0.2s;
	transition-behavior: allow-discrete;

	/* Modern CSS Anchor Positioning API */
	/* This positions the tooltip relative to its anchor (the slot) */
	position: absolute;

	/* Try anchor positioning first (modern browsers) */
	position-anchor: var(--tooltip-anchor, none);
	position-area: block-end;
	margin-block-start: 0.5rem;

	/* Fallback for browsers without anchor positioning support */
	@supports not (position-area: block-end) {
		/* Traditional positioning as fallback */
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 0.5rem;
	}
}

.tooltip__slot:hover + .tooltip__content,
.tooltip__slot:focus + .tooltip__content,
.tooltip__slot:focus-within + .tooltip__content {
	display: block;
	opacity: 1;
}

/* Optional: Position tooltip above when near bottom of viewport */
@media (prefers-reduced-motion: no-preference) {
	.tooltip__content {
		@starting-style {
			opacity: 0;
		}
	}
}