[data-definition-tooltip] {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	gap: 0.5rem;
}

[data-definition-tooltip-trigger] {
	position: relative;
	color: var(--accent, var(--orange, #7c7c7c));
	font-size: 1em;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 0.1em;

	& {
		&::before {
			content: '';
			position: absolute;
			inset: -2rem;
			z-index: -1;
			pointer-events: auto;
			border-radius: 0.5rem;
			translate: 0 calc(calc(clamp(-1px, var(--y, 0) * 999999, 1px)) * 16);
		}
	}
	&[data-definition-tooltip-selected] {
		&::before {
			clip-path: inset(0);
			transition: clip-path 0s 0.3s;
		}
	}
	&:not([data-definition-tooltip-selected]) {
		&::before {
			clip-path: inset(0 0 100% 0);
			transition: clip-path 0s 0.3s;
		}
	}
}

[data-definition-tooltip-floater] {
	position: absolute;
	left: var(--x, 0);
	top: var(--y, 0);
	width: 32rem;
	max-width: 90lvw;
	max-height: 50lvh;
	z-index: 10;
	display: flex;
	flex-direction: column;

	& {
		pointer-events: none;
	}
	&:is(:hover, :focus, :focus-within) {
		pointer-events: auto;
	}

	&[data-definition-tooltip-selected] {
		visibility: visible;
		opacity: 1;

		transition:
			translate 0.2s 0.2s var(--ease-out, ease-out),
			visibility 0s,
			opacity 0.2s 0.2s var(--ease-out, ease-out);
	}
	&:not([data-definition-tooltip-selected]) {
		visibility: hidden;
		opacity: 0;
		translate: 0 calc(calc(clamp(-1px, var(--y, 0) * 999999, 1px)) * -10);

		transition:
			translate 0.1s 0.1s var(--ease-in-out, ease-in-out),
			visibility 0s 0.3s,
			opacity 0.2s 0.1s var(--ease-out, ease-out);
	}

	& {
		&::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: -1;
			pointer-events: auto;
			border-radius: 0.5rem;
		}
	}
	&[data-definition-tooltip-selected] {
		&::before {
			clip-path: inset(0);
			transition: clip-path 0s 0.3s;
		}
	}
	&:not([data-definition-tooltip-selected]) {
		&::before {
			clip-path: inset(0 0 100% 0);
			transition: clip-path 0s 0.3s;
		}
	}

	& [data-definition-tooltip-content] {
		position: relative;
		flex-grow: 1;
		overflow: clip auto;
		border-radius: 0.5rem;
		background-color: var(--bg, #fff);
		color: var(--fg, #7c7c7c);
		z-index: -1;
		padding: 1rem;
		box-shadow:
			0 0.4rem 0.4rem rgb(0 0 0 / 5%),
			0 0.8rem 1.2rem rgb(0 0 0 / 5%);

		& > .title {
			margin-top: 0;
			margin-bottom: 1rem;
		}

		& :where(a) {
			color: var(--accent, var(--orange, #7c7c7c));
		}
	}
}