/* Tooltips
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-tooltip] {
	position: relative;
}

[data-tooltip]:not(a):not(button):not(input) {
	border-bottom: 1px dotted;
	cursor: help;
}

[data-tooltip]::before {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 50%;
	left: 50%;
	z-index: 10;
	padding: .5rem .75rem;
	background-color: #222;
	border-radius: .25rem;
	font-size: .75rem;
	font-weight: normal;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	line-height: normal;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -0.5rem);
}

[data-tooltip]::after {
	content: "";
	position: absolute;
	bottom: 50%;
	left: 50%;
	border-width: .38rem .38rem 0 .38rem;
	border-style: solid;
	border-color: #222 transparent transparent;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -0.25rem);
}

[data-tooltip]:hover::before,
[data-tooltip]:focus::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
	bottom: 100%;
	opacity: 1;
	transition: .2s ease all;
}