@charset "utf-8";

/* uniTip, re-skinned for defaultHM.
 *
 * js/flux.unitip.js builds #unitip > (#unitippoint, #unitipmid, #unitipcap)
 * and flips their order when the cursor nears the bottom of the window, so the
 * pointer is drawn as a rotated square -- it reads the same either way up and
 * needs no sprite images. */

#unitip {
	position: absolute;
	z-index: 1000;
	top: -1000px;
	display: none;
	font: 400 12px/1.5 var(--font-body, sans-serif);
	color: var(--text, #e7edfb);
	pointer-events: none;
	filter: drop-shadow(0 10px 24px rgba(2, 5, 14, .55));
}

#unitippoint,
#unitipmid,
#unitipcap {
	position: relative;
	display: block;
	left: 0;
}

#unitippoint {
	width: 100%;
	height: 10px;
	overflow: visible;
}

#unitippoint::after {
	content: "";
	position: absolute;
	left: 16px;
	bottom: -4px;
	width: 10px;
	height: 10px;
	background: var(--glass-2, rgba(150, 180, 228, .11));
	border: 1px solid var(--edge, rgba(190, 214, 255, .14));
	border-radius: 2px;
	transform: rotate(45deg);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
}

#unitipmid {
	width: auto;
	min-width: 90px;
	max-width: 280px;
	height: auto;
	padding: 9px 13px;
	background: var(--glass-2, rgba(150, 180, 228, .11));
	border: 1px solid var(--edge, rgba(190, 214, 255, .14));
	border-radius: 10px;
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	word-wrap: break-word;
}

#unitipcap {
	width: 100%;
	height: 4px;
	overflow: hidden;
}

html[data-scheme="light"] #unitipmid,
html[data-scheme="light"] #unitippoint::after {
	background: rgba(255, 255, 255, .92);
	border-color: rgba(24, 46, 88, .14);
}