$grey: #8e8e8e;
$black: #101517;
$white: #fff;

.jb-score-tooltips-container {
	width: 100%;
	position: relative;
	pointer-events: none;

}

.jb-score-tooltip-react-root {
	position: absolute;
	bottom: -20px;
	translate: -50% calc(100% - 20px);
	z-index: 1000;
	pointer-events: auto;
	user-select: text;
}

.jb-score-tooltip {
	background-color: $black;
	color: $white;
	padding: 16px 24px;
	border-radius: 4px;
	font-size: 14px;
	width: 20em;
	position: relative;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	display: none;

	.visible &,
	&:hover {
		display: block;
	}

	hr {
		border-top: 1px solid $grey;
		border-bottom: none;
		border-left: none;
		border-right: none;
	}

	&__date {
		font-size: 1em;
		font-weight: 600;
		// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
		line-height: 1.6em;
	}

	&__row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0.9em 0;

		&--secondary {
			color: $grey;
			margin-left: 1em;
		}
	}

	&__pointer {
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid $black;
		position: absolute;
		top: -7px;
		left: 50%;
		transform: translateX(-50%);
	}
}
