[data-tooltip] {
	display: inline-block;
	position: relative;
}

[data-tooltip-block] {
	display: block;
}

.tooltip {
	font-size: .825rem;
	left: 0;
	min-width: 20ch;
	max-width: 44ch;
	pointer-events: none;
	position: absolute;
	top: 100%;
	z-index: 2;
}

.push-up .tooltip {
	bottom: 100%;
	top: auto;
}

.push-right .tooltip {
	left: auto;
	right: 0;
}

.tooltip__content {
	background: #fafafa;
	border-radius: 3px;
	border: 1px solid #aaa;
	display: inline-block;
	opacity: 0;
	padding: .625em;
	visibility: hidden;
}

.tooltip__content > * {
	margin: .5em 0;
}

.tooltip__content :last-child {
	margin-bottom: 0;
}

.tooltip__content :first-child {
	margin-top: 0;
}

.tooltip--show .tooltip__content {
	opacity: 1;
	pointer-events: auto;
	transition: opacity .15s .8s ease-in;
	visibility: visible;
}