i-tooltip {
	margin: 6px;
	position: fixed;
	position-area: top;
	justify-self: anchor-center;
	position-try: flip-block, flip-inline, flip-block flip-inline;
	pointer-events: none;
	background: var(--i-tooltip--ba-co);
	color: hsl(0 0% 100%);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	font-size: max(12px, .8em);
	font-weight: 500;
	padding: .5em 1em;
	border-radius: 6px;
	box-shadow: 0 2px 6px hsl(0 0% 0% / .1);
	max-width: min(100% - 40px, 30em);
	transition-property: display, overlay, opacity, translate;
	transition-behavior: allow-discrete;
	transition-duration: .3s;
	opacity: 0;
	translate: 0 10px;
}

i-tooltip:popover-open {
	opacity: 1;
	translate: 0 0;
}

@starting-style {
	i-tooltip:popover-open {
		opacity: 0;
		translate: 0 10px;
	}
}

i-tooltip.\:popover-open{
    opacity: 1;
	translate: 0 0;
}

@supports (not (anchor-name: --x)) or (-webkit-hyphens: auto){
	i-tooltip{
		/* Safari doesn't support transitions with anchored popovers, yet. */
        position-area: initial;
        justify-self: initial;
        position-try: initial;
		
		--margin: 6px;
		margin: 0;
		top: auto;
		right: auto;
		bottom: calc(100% - var(--top) + var(--margin));
		left: 0;
		transform:
            /* Keep tooltip within viewport */
			translateX(clamp(
				var(--margin), 
				var(--left) - 50%, 
				100vw - var(--margin) - 100%
			))
            /* Move tooltip below anchor if it won't fit above */
			translateY(
				clamp(
					0%,
					(var(--top) - var(--margin) - 100%) * -999,
					100% + var(--height) + var(--margin) * 2
				)
			)
		;
	}
}