@import './../vendor/@carbon/motion/scss/motion.scss';
@import './../vendor/@carbon/type/scss/type';
@import './../vendor/@carbon/type/scss/font-face/mono';
@import './../vendor/@carbon/type/scss/font-face/sans';

.#{$prefix}--#{$charts-prefix}--tooltip {
	background-color: $ui-02;
	pointer-events: none;
	@include carbon--motion(standard, expressive);
	display: inline;
	visibility: visible;
	box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
	position: absolute;
	word-wrap: break-word;
	z-index: 1059;
	font-family: carbon--font-family('sans-condensed');
	transition: visibility 0s linear 0.1s, opacity 0.1s;

	&.hidden {
		opacity: 0;
		visibility: hidden;
		transition: visibility 0s linear 0s, opacity 0.1s;
		@include carbon--motion(standard, expressive);
	}

	.content-box {
		color: $text-01;

		.title-tooltip {
			width: auto;
			padding: 4px;
			min-width: 20px;
			max-width: 270px;

			p {
				margin: 2px;
				font-size: 12px;
				line-height: 1rem;
			}
		}

		.datapoint-tooltip {
			display: flex;
			padding: 4px;
			flex-flow: row nowrap;
			width: auto;
			min-width: 20px;
			justify-content: flex-start;
			align-items: center;

			div.label {
				display: flex;
				flex: 1;

				p {
					flex: 1;
					padding-right: 8px;
				}

				span.label-icon svg {
					height: 12px;
					padding-top: 3px;
					vertical-align: top;
					padding-left: 4px;
					width: auto;

					@if ($carbon--theme == $carbon--theme--g90) or
						($carbon--theme == $carbon--theme--g100)
					{
						fill: white;
					} @else {
						fill: black;
					}
				}
			}

			&.bold {
				font-weight: carbon--font-weight('semibold');
			}

			p {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 16px;
				font-size: 12px;
				display: inline-block;
				margin: 0;
				padding: 0;
				border: 0;

				&.value {
					width: auto;
					margin-left: 6px;
				}
			}
		}

		ul.multi-tooltip {
			margin: 0;
			padding: 0;

			li {
				list-style: none;
				position: relative;

				&:not(:last-child) {
					@if $carbon--theme == $carbon--theme--g90 {
						border-bottom: 1px solid $ui-01;
					} @else if $carbon--theme == $carbon--theme--g100 {
						border-bottom: 1px solid $ui-04;
					} @else {
						border-bottom: 1px solid $ui-03;
					}
				}
			}
		}
	}

	.tooltip-color {
		position: absolute;
		left: 0;
		top: 0;
		width: 4px;
		height: 100%;

		@media (forced-colors: active) {
			forced-color-adjust: none;
		}

		& + div.label p {
			margin-left: 4px;
		}
	}
}