// ServiceNow Design System

// NOW Tooltip

@import '@servicenow/sass-kit/host';
@import 'theme';

:host {
	--now-line-height: 0;
}

// TODO: adding a fade-in/fade-out animation would be nice

.now-tooltip {
	position: fixed;
	z-index: $now-global-layer--temp;
	display: block;
	visibility: hidden;
	max-width: now-fn-px2rem(304px);
	border-width: $now-tooltip--border-width;
	border-style: solid;
	border-color: RGB($now-tooltip--border-color);
	border-radius: $now-tooltip--border-radius;
	padding: $now-global-space--sm;
	font-size: $now-global-font-size--sm;
	line-height: $now-global-line-height--sm;
	font-family: $now-tooltip--font-family;
	overflow-wrap: break-word;
	cursor: default;
	color: RGB($now-tooltip--color);
	background-color: RGB($now-tooltip--background-color);
	word-wrap: break-word;
	@include now-mx-rtl-value('text-align', 'left');
	@include now-mx-inherits(
		$font-style: $now-tooltip--font-style,
		$font-weight: $now-tooltip--font-weight,
		$text-transform: $now-tooltip--text-transform
	);

	.now-line-height-crop {
		@include now-mx-line-height-crop($now-global-line-height--sm);
	}
}