/* NS-2025: icon box tooltip. Base look; each widget overrides the --tooltip-*
   variables from its Style > Tooltip settings. */
[data-mdt="tooltip"] {
	position: relative;
	cursor: pointer;
}

[data-mdttooltip="box"] {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 100%;
	right: 50%;
	bottom: initial;
	left: initial;
	transform: translateX(50%);
	background-color: var(--tooltip-background, #444);
	border-radius: var(--tooltip-border-radius);
	color: var(--tooltip-color, #fff);
	max-width: var(--tooltip-max-width);
	min-width: var(--tooltip-min-width);
	padding: var(--tooltip-padding, 10px);
	text-align: var(--tooltip-align);
	transition-duration: .3s;
	transition-property: opacity;
}

[data-mdt="tooltip"]:hover [data-mdttooltip="box"] {
	visibility: visible;
	opacity: 1;
}

/* tooltip arrow */
[data-mdttooltip="box"]::after {
	content: '';
	position: absolute;
	bottom: 100%;
	left: calc(50% - 3px);
	border-width: 6px;
	border-style: solid;
	border-color: transparent transparent var(--tooltip-background, #444) transparent;
	pointer-events: none;
}