n8n/packages/design-system/theme/src/tooltip.scss

@use "mixins/mixins";
@use "./common/var";

@include mixins.b(tooltip) {
	&:focus:not(.focusing),
	&:focus:hover {
		outline-width: 0;
	}

	a {
		font-weight: var(--font-weight-bold);
	}

	@include mixins.e(popper) {
		position: absolute;
		border-radius: 4px;
		padding: var.$tooltip-padding;
		z-index: var.$index-popper;
		font-size: var.$tooltip-font-size;
		line-height: 1.2;
		min-width: 10px;
		word-wrap: break-word;

		.popper__arrow,
		.popper__arrow::after {
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			border-color: transparent;
			border-style: solid;
		}

		.popper__arrow {
			border-width: var.$tooltip-arrow-size;
		}

		.popper__arrow::after {
			content: ' ';
			border-width: 5px;
		}

		&[x-placement^='top'] {
			margin-bottom: #{var.$tooltip-arrow-size + 6px};
		}

		&[x-placement^='top'] .popper__arrow {
			bottom: -(var.$tooltip-arrow-size);
			border-top-color: var.$tooltip-border-color;
			border-bottom-width: 0;

			&::after {
				bottom: 1px;
				margin-left: -5px;
				border-top-color: var.$tooltip-fill;
				border-bottom-width: 0;
			}
		}

		&[x-placement^='bottom'] {
			margin-top: #{var.$tooltip-arrow-size + 6px};
		}

		&[x-placement^='bottom'] .popper__arrow {
			top: -(var.$tooltip-arrow-size);
			border-top-width: 0;
			border-bottom-color: var.$tooltip-border-color;

			&::after {
				top: 1px;
				margin-left: -5px;
				border-top-width: 0;
				border-bottom-color: var.$tooltip-fill;
			}
		}

		&[x-placement^='right'] {
			margin-left: #{var.$tooltip-arrow-size + 6px};
		}

		&[x-placement^='right'] .popper__arrow {
			left: -(var.$tooltip-arrow-size);
			border-right-color: var.$tooltip-border-color;
			border-left-width: 0;

			&::after {
				bottom: -5px;
				left: 1px;
				border-right-color: var.$tooltip-fill;
				border-left-width: 0;
			}
		}

		&[x-placement^='left'] {
			margin-right: #{var.$tooltip-arrow-size + 6px};
		}

		&[x-placement^='left'] .popper__arrow {
			right: -(var.$tooltip-arrow-size);
			border-right-width: 0;
			border-left-color: var.$tooltip-border-color;

			&::after {
				right: 1px;
				bottom: -5px;
				margin-left: -5px;
				border-right-width: 0;
				border-left-color: var.$tooltip-fill;
			}
		}

		@include mixins.when(dark) {
			background: var.$tooltip-fill;
			color: var.$tooltip-color;
		}

		@include mixins.when(light) {
			background: var.$tooltip-color;
			border: 1px solid var.$tooltip-fill;

			&[x-placement^='top'] .popper__arrow {
				border-top-color: var.$tooltip-fill;
				&::after {
					border-top-color: var.$tooltip-color;
				}
			}
			&[x-placement^='bottom'] .popper__arrow {
				border-bottom-color: var.$tooltip-fill;
				&::after {
					border-bottom-color: var.$tooltip-color;
				}
			}
			&[x-placement^='left'] .popper__arrow {
				border-left-color: var.$tooltip-fill;
				&::after {
					border-left-color: var.$tooltip-color;
				}
			}
			&[x-placement^='right'] .popper__arrow {
				border-right-color: var.$tooltip-fill;
				&::after {
					border-right-color: var.$tooltip-color;
				}
			}
		}
	}
}