/* Position Options
	- top / block-start
	- right / inline-end
	- bottom / block-end
	- left / inline-start
*/
[role=tooltip] {
	background: #fff;
	border-radius: 0.5rem;
	color: #000;
	display: none;
	-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
	        filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
	font-size: 1rem;
	font-weight: 400;
	inline-size: -webkit-max-content;
	inline-size: -moz-max-content;
	inline-size: max-content;
	line-height: initial;
	margin: 0;
	max-inline-size: 25rem;
	opacity: 0;
	padding: 0.75rem 1.5rem;
	pointer-events: none;
	position: absolute;
	text-align: start;
	-webkit-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
	    -ms-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
	        transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
	-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
	transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
	transition: opacity 0.2s ease, transform 0.2s ease;
	transition: opacity 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	will-change: filter;
	z-index: 10;
}
[role=tooltip]::before {
	clip-path: inset(50%);
	clip: rect(1px, 1px, 1px, 1px);
	content: "; Has tooltip: ";
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
[role=tooltip]::after {
	background: #fff;
	content: "";
	inset: 0;
	-webkit-mask: var(--tooltip-pointer);
	        mask: var(--tooltip-pointer);
	position: absolute;
	z-index: -1;
}
[role=tooltip]:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]),
[tip-position=bottom],
[tip-position=block-end]) {
	text-align: center;
}
[role=tooltip]:is([tip-position=top],
[tip-position=block-start],
:not([tip-position])) {
	inset-inline-start: 50%;
	inset-block-end: calc(100% + 0.75rem + 1rem);
	--tooltip-x: calc(50% * -1);
}
[role=tooltip]:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]))::after {
	--tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat;
	inset-block-end: -1rem;
	-webkit-border-after: 1rem solid transparent;
	        border-block-end: 1rem solid transparent;
}
[role=tooltip]:is([tip-position=right],
[tip-position=inline-end]) {
	inset-inline-start: calc(100% + 1.5rem + 1rem);
	inset-block-end: 50%;
	--tooltip-y: 50%;
}
[role=tooltip]:is([tip-position=right],
[tip-position=inline-end])::after {
	--tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat;
	inset-inline-start: -1rem;
	-webkit-border-start: 1rem solid transparent;
	        border-inline-start: 1rem solid transparent;
}
[role=tooltip]:is([tip-position=bottom],
[tip-position=block-end]) {
	inset-inline-start: 50%;
	inset-block-start: calc(100% + 0.75rem + 1rem);
	--tooltip-x: calc(50% * -1);
}
[role=tooltip]:is([tip-position=bottom],
[tip-position=block-end])::after {
	--tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat;
	inset-block-start: -1rem;
	-webkit-border-before: 1rem solid transparent;
	        border-block-start: 1rem solid transparent;
}
[role=tooltip]:is([tip-position=left],
[tip-position=inline-start]) {
	inset-inline-end: calc(100% + 1.5rem + 1rem);
	inset-block-end: 50%;
	--tooltip-y: 50%;
}
[role=tooltip]:is([tip-position=left],
[tip-position=inline-start])::after {
	--tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat;
	inset-inline-end: -1rem;
	-webkit-border-end: 1rem solid transparent;
	border-inline-end: 1rem solid transparent;
}
@media (prefers-color-scheme: dark) {
	[role=tooltip] {
		background: #1f2127;
		color: #fff;
		-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
		        filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
	}
	[role=tooltip]::after {
		background: #1f2127;
	}
}

:has(> [role=tooltip]) {
	position: relative;
}
:has(> [role=tooltip]):is(:hover, :focus-visible, :active) > [role=tooltip] {
	display: block;
	opacity: 1;
	-webkit-transition-delay: 300ms;
	        transition-delay: 300ms;
}

@media (prefers-reduced-motion: no-preference) {
	:has(> [role=tooltip]:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) [role=tooltip] {
		--tooltip-y: 3px;
	}
	:has(> [role=tooltip]:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) [role=tooltip] {
		--tooltip-x: calc(-1 * -3px * -1);
	}
	:has(> [role=tooltip]:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) [role=tooltip] {
		--tooltip-y: -3px;
	}
	:has(> [role=tooltip]:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) [role=tooltip] {
		--tooltip-x: calc(-1 * 3px * -1);
	}
}