n-tooltip.scss

/* niui – Tooltip */

.n-tooltip {
	cursor: help;

	&__icon {
		&:empty:after {
			content: "?";
		}

		display: inline-block;
		border-radius: 0.5em;
		min-width: 1em;
		height: 1em;
		text-align: center;
		line-height: 1;
		background-color: var(--nui-control-bg, #444);
	}

	&__icon,
	&__content {
		color: var(--nui-control-color, #ddd);
	}

	&__content {
		overflow: hidden;
		max-height: calc(100vh - 40px);
		padding: calc(var(--line-height-em)/2);
		font-size: 0.8em;
		font-weight: normal;
		position: absolute;
		z-index: 999;
		text-align: start;
		transition: opacity 0.2s ease-in-out;
		width: min(30em, 80vw);
		line-height: calc(var(--line-height-em)/1.25);
		padding: 2em;
		box-sizing: border-box;
		// border-radius: var(--nui-border-radius);
		display: none;

		&-visible {
			display: block;
			// overflow: visible;
		}

		&:after {
			// Arrow
			content: "";
			position: absolute;
			background-color: var(--nui-control-bg, #444);
			transform: rotate(45deg);
			width: 1em;
			height: 1em;
		}

		&:before {
			content: "";
			inset: 0;
			position: absolute;
			margin: 1em;
			background: var(--nui-control-bg, #444);
			border-radius: var(--nui-border-radius);
			z-index: -1;
		}

		&:not([data-n-position="top"]) {
			-webkit-mask: linear-gradient(red, red) no-repeat;
			-webkit-mask-size: 100% calc(100% - 1em);
			mask: linear-gradient(red, red) no-repeat;
			mask-size: 100% calc(100% - 1em);

		}

		&[data-n-position="top"],
		&[data-n-position="bottom"] {
			margin-left: var(--offset_x, 0);

			&:after {
				left: calc(50% - 0.5em - var(--offset_x, 0));
				bottom: 0.55em;
			}
		}

		&[data-n-position="bottom"]:after {
			top: 0.55em;
		}

		&[data-n-position="left"],
		&[data-n-position="right"] {
			margin-top: var(--offset_y, 0);

			&:after {
				top: calc(50% - 0.5em - var(--offset_y, 0));
				left: 0.55em;
			}
		}

		&[data-n-position="left"]:after {
			right: 0.55em;
			left: auto;
		}
	}

}

// Displaced tip required relative body position

body:has(> .n-tooltip__content) {
	position: relative;
}

// @supports not selector(a:has(a)) { // Sass error
// 	body {
// 		position: relative;
// 	}
// }

@-moz-document url-prefix() {
	body {
		position: relative;
	}
}