/* Patterns - Content - Tooltip */
/* Since this pattern is Deprecated, it should not appear at SASSDCS! */

.tooltip {
	display: inline-block;
	position: relative;

	// Service Studio Preview
	& {
		-servicestudio-z-index: var(--layer-global-screen);
	}

	&-content {
		// Service Studio Preview
		& {
			-servicestudio-min-width: 90px;
		}
	}

	&-wrapper {
		background-color: var(--color-neutral-9);
		border-radius: var(--border-radius-soft);
		color: var(--color-neutral-0);
		min-width: 80px;
		padding: var(--space-s) var(--space-base);
		position: absolute;
		text-align: center;
		z-index: var(--layer-global-elevated);

		// Service Studio Preview
		& {
			-servicestudio-position: relative;
			-servicestudio-width: 150px;
		}

		&.top {
			bottom: calc(100% + var(--space-s));
			left: 50%;
			transform: translateX(-50%);

			// Service Studio Preview
			& {
				-servicestudio-bottom: 130%;
			}

			&:after {
				border: 8px solid transparent;
				border-top: 8px solid var(--color-neutral-9);
				bottom: -14px;
				content: '';
				height: 0;
				left: 50%;
				position: absolute;
				transform: translateX(-50%);
				width: 0;
			}

			&-left {
				bottom: calc(100% + var(--space-s));
				right: calc(100% - var(--space-m));

				&:after {
					border: 8px solid transparent;
					border-top: 8px solid var(--color-neutral-9);
					bottom: -14px;
					content: '';
					height: 0;
					position: absolute;
					right: 7px;
					width: 0;
				}
			}

			&-right {
				bottom: calc(100% + var(--space-s));
				left: calc(100% - var(--space-m));

				&:after {
					border: 8px solid transparent;
					border-top: 8px solid var(--color-neutral-9);
					bottom: -14px;
					content: '';
					height: 0;
					left: 7px;
					position: absolute;
					width: 0;
				}
			}
		}

		&.bottom {
			left: 50%;
			top: calc(100% + var(--space-s));
			transform: translateX(-50%);

			&:after {
				border: 8px solid transparent;
				border-bottom: 8px solid var(--color-neutral-9);
				content: '';
				height: 0;
				left: 50%;
				position: absolute;
				top: -14px;
				transform: translateX(-50%);
				width: 0;
			}

			&-left {
				right: calc(100% - var(--space-m));
				top: calc(100% + var(--space-s));

				&:after {
					border: 8px solid transparent;
					border-bottom: 8px solid var(--color-neutral-9);
					content: '';
					height: 0;
					position: absolute;
					right: 7px;
					top: -14px;
					width: 0;
				}
			}

			&-right {
				left: calc(100% - var(--space-m));
				top: calc(100% + var(--space-s));

				&:after {
					border: 8px solid transparent;
					border-bottom: 8px solid var(--color-neutral-9);
					content: '';
					height: 0;
					left: 7px;
					position: absolute;
					top: -14px;
					width: 0;
				}
			}
		}

		&.left {
			right: calc(100% + var(--space-s));
			top: 50%;
			transform: translateY(-50%);

			&:after {
				border: 8px solid transparent;
				border-left: 8px solid var(--color-neutral-9);
				content: '';
				height: 0;
				left: calc(100% - 1px);
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 0;
			}
		}

		&.right {
			left: calc(100% + var(--space-s));
			top: 50%;
			transform: translateY(-50%);

			&:after {
				border: 8px solid transparent;
				border-right: 8px solid var(--color-neutral-9);
				content: '';
				height: 0;
				position: absolute;
				right: calc(100% - 1px);
				top: 50%;
				transform: translateY(-50%);
				width: 0;
			}
		}
	}

	&-background {
		height: 100%;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: var(--layer-local-tier-1);

		// Service Studio Preview
		& {
			-servicestudio-display: none;
		}
	}
}

.layout-native {
	.tabs-content {
		.tooltip-background {
			position: absolute;
		}
	}
}