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

.#{$prefix}--#{$charts-prefix}--tooltip {
	background-color: $ui-02;
	pointer-events: none;
	transition: opacity 0.1s;
	@include carbon--motion(standard, expressive);
	display: inline;
	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');

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

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

		.title-tooltip {
			p {
				margin: 2px;
				font-size: 12px;
			}
			width: auto;
			padding: 4px;
			min-width: 20px;
			max-width: 270px;
		}

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

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

				&.label {
					flex: 1;
					margin-right: 8px;
				}

				&.value {
					width: auto;
				}
			}

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

		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%;
		& + p.label {
			margin-left: 4px;
		}
	}
}