/* natUIve – Tooltip */

@import 'natuive-setup';

.tip, label span .tip {
	
	font-size: $font-size;
	line-height: $line-height;
// 	line-height: var(--line-height);
	min-height: $line-height-em;
// 	min-height: var(--line-height-em);

}

.tool {

	cursor: help;
	font-weight: bold;
	position: relative;

}
	
.tool:after {
	
	content: '?';
	display: inline-block;
	background: #444;
	border-radius: 100%;
	color: #ddd;
	width: 1.5em;
	text-align: center;

}

.tool[aria-expanded]:after {
	
	content: '✕';

}

.tip, label span .tip {

	background: #333;
	color: #ddd;
	padding: $line-height-em/2;
// 	padding: calc(var(--line-height-em)/2);
	font-size: .8em;
	font-weight: normal;
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	cursor: default;
	overflow: hidden;
	z-index: 999;
	text-align: left;
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s ease-in-out;
	width: 20em;
	line-height: $line-height/1.3;
// 	line-height: calc(var(--line-height)/1.3);

}

.tool[aria-expanded] .tip, html:not(.can-touch) .tool:hover .tip {
	
	opacity: 1;
	visibility: visible;
	top: 100%;
	
}
