/* Patterns - Content - Tooltip */
////
/// @group Patterns-Tooltip
/// Patterns - Content - Tooltip

///
.osui-tooltip {
	--osui-tooltip-background-color: var(--color-neutral-9);
	--osui-tooltip-arrow-size: 10px;
	--osui-floating-offset: var(--space-s);
	display: inline-block;
	position: relative;

	// ServiceStudio Preview
	& {
		-servicestudio-vertical-align: middle;
	}

	.osui-balloon {
		background-color: var(--osui-tooltip-background-color);
		border-radius: var(--border-radius-soft);
		color: var(--color-neutral-0);
		font-size: var(--font-size-s);
		font-weight: var(--font-regular);
		line-height: initial;
		max-width: 250px;
		padding: var(--space-s);

		&[class*='top'] {
			&:after {
				left: 0;
				top: calc(var(--osui-floating-offset) * 2);
			}
		}

		&[class*='left'] {
			&:after {
				left: calc(var(--osui-floating-offset) * 2);
				top: 0;
			}
		}

		&[class*='bottom-end'] {
			&:after {
				left: 0;
			}
		}

		// Increase hover size to fit the gap between trigger and balloon
		&:after {
			content: '';
			position: absolute;
			left: calc(0px - var(--osui-floating-offset) * 2);
			top: calc(0px - var(--osui-floating-offset) * 2);
			width: 100%;
			height: 100%;
			z-index: var(--layer-global-negative);
		}

		// Service Studio Preview
		& {
			-servicestudio-left: initial;
			-servicestudio-max-height: initial;
			-servicestudio-opacity: 1;
			-servicestudio-overflow: initial;
			-servicestudio-pointer-events: initial;
		}
	}

	&__balloon-arrow {
		position: absolute;
		width: var(--osui-tooltip-arrow-size);
		height: var(--osui-tooltip-arrow-size);
		background-color: var(--osui-tooltip-background-color);
		transform: rotate(45deg);
		z-index: var(--layer-global-negative);
	}

	&__content {
		cursor: pointer;

		&:empty {
			// ServiceStudio Preview
			& {
				-servicestudio-min-width: 80px;
			}
		}
	}

	&__balloon-wrapper__balloon {
		text-wrap: wrap;
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.osui-tooltip {
		.osui-balloon {
			border: var(--border-size-s) solid var(--osui-tooltip-background-color);
		}

		&__balloon-arrow {
			border: 0 solid var(--osui-tooltip-background-color);
			border-right-width: var(--border-size-s);
			border-bottom-width: var(--border-size-s);
		}
	}
}