.epdt-tooltip {
	--epdt-tooltip-bg: #1e1e1e;
	--epdt-tooltip-color: #ffffff;
	--epdt-tooltip-font-size: 13px;
	position: relative;
}

.epdt-tooltip:before,
.epdt-tooltip:after {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s ease;
	z-index: 9999;
}

.epdt-tooltip:before {
	content: attr(data-epdt-tooltip);
	background: var(--epdt-tooltip-bg);
	color: var(--epdt-tooltip-color);
	font-size: var(--epdt-tooltip-font-size);
	line-height: 1.4;
	padding: 6px 10px;
	border-radius: 4px;
	white-space: normal;
	max-width: 260px;
	width: max-content;
}

.epdt-tooltip:after {
	content: '';
	border: 6px solid transparent;
}

.epdt-tooltip[data-epdt-tooltip-pos="top"]:before {
	bottom: 100%;
	left: 50%;
	transform: translate(-50%, -8px);
}
.epdt-tooltip[data-epdt-tooltip-pos="top"]:after {
	bottom: 100%;
	left: 50%;
	transform: translate(-50%, -2px);
	border-top-color: var(--epdt-tooltip-bg);
}

.epdt-tooltip[data-epdt-tooltip-pos="bottom"]:before {
	top: 100%;
	left: 50%;
	transform: translate(-50%, 8px);
}
.epdt-tooltip[data-epdt-tooltip-pos="bottom"]:after {
	top: 100%;
	left: 50%;
	transform: translate(-50%, 2px);
	border-bottom-color: var(--epdt-tooltip-bg);
}

.epdt-tooltip[data-epdt-tooltip-pos="left"]:before {
	right: 100%;
	top: 50%;
	transform: translate(-8px, -50%);
}
.epdt-tooltip[data-epdt-tooltip-pos="left"]:after {
	right: 100%;
	top: 50%;
	transform: translate(-2px, -50%);
	border-left-color: var(--epdt-tooltip-bg);
}

.epdt-tooltip[data-epdt-tooltip-pos="right"]:before {
	left: 100%;
	top: 50%;
	transform: translate(8px, -50%);
}
.epdt-tooltip[data-epdt-tooltip-pos="right"]:after {
	left: 100%;
	top: 50%;
	transform: translate(2px, -50%);
	border-right-color: var(--epdt-tooltip-bg);
}

.epdt-tooltip:hover:before,
.epdt-tooltip:hover:after,
.epdt-tooltip:focus-within:before,
.epdt-tooltip:focus-within:after {
	opacity: 1;
	visibility: visible;
}