@import "~scss/_mixins";

#tooltipContainer { position: fixed; left: 0px; top: 0px; z-index: 1002; pointer-events: none; }

.tooltip { 
	position: absolute; border-radius: 4px; background: #373632; padding: 3px 7px; text-transform: none;
	@include text-small; line-height: 16px; color: var(--color-bg-primary); white-space: nowrap; transform: scale3d(0.7, 0.7, 1); opacity: 0;
}
.tooltip.anim { transition-duration: 0.25s; transition-timing-function: $easeInQuint; transition-property: opacity, transform; }
.tooltip.show { transform: scale3d(1, 1, 1); opacity: 1; }
.tooltip {
	.txt { line-height: inherit; list-style-position: inside; }
	.txt:empty { display: none; }
	.caption { color: var(--color-text-secondary); }
}

.tooltip.big {
	background-color: var(--color-bg-primary); color: var(--color-text-primary); min-width: 240px; white-space: normal; padding: 12px 16px;
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2); border-radius: 8px;
}
.tooltip.big {
	.title { @include text-common; font-weight: 500;  }
	.txt { @include text-small; margin: 2px 0px 0px 0px; }
}

.tooltip.fromVault { min-width: unset; transform: scale3d(1, 1, 1); }
.tooltip.fromVault {
	.txt { @include text-overflow-nw; width: 100%; max-width: 360px; }
}

.tooltip.relationGroupDescription {
	width: 280px; padding: 13px 16px; border-radius: 8px; box-shadow: 0px 2px 28px 0px rgba(0, 0, 0, 0.20);
	background: var(--color-bg-primary); color: var(--color-text-primary); white-space: normal; @include text-common;
}
