:root {
	--main-fr-color: #ffffff;
}

@supports (color: oklch(from white l c h)) {
  :root {
	--main-fr-color: oklch(from var(--primary-color) calc((0.62 - l) * infinity) 0 0);
  }
}

.tt {
	display: none;
	position: absolute;
	z-index: 9999;
	max-width: 400px;
	padding: 15px;
	background: var(--primary-color);
	color: var(--main-fr-color);
	font-size: 1em;
	line-height: 1.5;
	border-radius: 8px;
	pointer-events: none;
	word-wrap: break-word;
	opacity: 0;
	transition: opacity .15s linear;
	box-shadow:2px 2px 5px rgba(0,0,0,0.3);
}
.tt.tt-show {
	display: block;
	opacity: 1;
}
.tt::after {
	content: '';
	position: absolute;
	border: 10px solid transparent;
}

.tt.tt-right::after  { right: 100%;  top: 50%;  transform: translateY(-50%); border-right-color:  var(--primary-color); }
.tt.tt-left::after   { left: 100%;   top: 50%;  transform: translateY(-50%); border-left-color:   var(--primary-color); }
.tt.tt-top::after    { top: 100%;    left: 50%; transform: translateX(-50%); border-top-color:    var(--primary-color); }
.tt.tt-bottom::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: var(--primary-color); }