[data-hover-text] {
	--touchToHover-color-bg:      #fefefe;
	--touchToHover-color-border:  #333;
	--touchToHover-color-text:    #222;
}

@media (prefers-color-scheme: dark) {
	[data-hover-text] {
		--touchToHover-color-bg:      #2b2a33;
		--touchToHover-color-border:  #f9f9fb;
		--touchToHover-color-text:    #f2f2f2;
	}
}

[data-hover-text] {
	cursor: help;
	position: relative;
}

[data-hover-text]:hover,
[data-hover-text].touched {
	text-decoration: underline;
}

[data-hover-text]:hover::before,
[data-hover-text].touched::before {
	font-size: 12px;
	font-weight: normal;
	color: var(--touchToHover-color-text);
	background-color: var(--touchToHover-color-bg);
	
	display: block;
	position: absolute;
	top: -2.45em;
	left: -1ch;
	z-index: 999999;
	
	content: attr(data-hover-text);
	
	border-radius: 3px;
	border: 1px solid var(--touchToHover-color-border);
	white-space: nowrap;
	padding: 0.5ch 0.8ch;
	box-shadow: 2px 2px 8px 0 #0002;
}

[data-hover-text].lefty:hover::before,
[data-hover-text].lefty.touched::before {
	left: unset;
	right: -2ch;
}