:root {
	--tooltip-bg:              #111111;
	--tooltip-color:           #ffffff;
	--tooltip-radius:          10px;
	--tooltip-padding:         10px 12px;
	--tooltip-fsize:           14px;
	--tooltip-shadow:          0 10px 30px rgba(0,0,0,.25);
	--tooltip-z:               9999;
	--tooltip-offset:          10px;
}

.tooltip {
	position:                  fixed;
	left:                      0;
	top:                       0;
	transform:                 translate(-9999px,-9999px);
	max-width:                 min(360px, 90vw);
	background:                var(--tooltip-bg);
	color:                     var(--tooltip-color);
	padding:                   var(--tooltip-padding);
	border-radius:             var(--tooltip-radius);
	font-size:                 var(--tooltip-fsize);
	line-height:               1.25;
	box-shadow:                var(--tooltip-shadow);
	z-index:                   var(--tooltip-z);
	pointer-events:            none;
	transition:                opacity .12s ease, transform .12s ease;
	opacity:                   0;
}

.tooltip.show {
	opacity:                   1;
}

.tooltip[data-arrow='bottom']::after,
.tooltip[data-arrow='top']::after,
.tooltip[data-arrow='right']::after,
.tooltip[data-arrow='left']::after {
	content:                   '';
	position:                  absolute;
	width:                     12px;
	height:                    12px;
	background:                var(--tooltip-bg);
	transform:                 rotate(45deg);
}

.tooltip[data-arrow='bottom']::after {
	left:                      50%;
	transform:                 translateX(-50%) rotate(45deg);
	bottom:                    -6px;
}

.tooltip[data-arrow='top']::after {
	left:                      50%;
	transform:                 translateX(-50%) rotate(45deg);
	top:                       -6px;
}

.tooltip[data-arrow='right']::after {
	top:                       50%;
	transform:                 translateY(-50%) rotate(45deg);
	right:                     -6px;
}

.tooltip[data-arrow='left']::after {
	top:                       50%;
	transform:                 translateY(-50%) rotate(45deg);
	left:                      -6px;
}

.theme-light {
	--tooltip-bg:              #ffffff;
	--tooltip-color:           #0f172a;
	--tooltip-shadow:          0 10px 30px rgba(15,23,42,.12);
	--tooltip-radius:          12px;
}

[data-tooltip]:focus {
	outline:                   3px solid #a5b4fc;
	outline-offset:            2px;
}