.popover {
	background-color: var(--background-color);
	color: var(--app-font-color);
	box-shadow: 0 1px 4px var(--gray-secondary);
	border-radius: 5px;
	padding: 8px;
	z-index: 2500;
	pointer-events: all;
	position: fixed;
	overflow: auto;
	height: fit-content;
	zoom: var(--page-zoom);
}

.popover[data-layout="tooltip"] {
	overflow: visible;
	box-shadow: none;
	filter: drop-shadow(0 1px 3px var(--gray-secondary));
}

/* Zentriere das Tooltip horizontal (top/bottom: left = Mitte des Triggers) */
.popover[data-layout="tooltip"][data-arrow="top"],
.popover[data-layout="tooltip"][data-arrow="bottom"] {
	transform: translateX(-50%);
}

.popover[data-layout="tooltip"]::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	left: calc(50% + var(--arrow-offset, 0px));
	transform: translateX(-50%);
}

/* Pfeil oben — Popover unterhalb des Triggers */
.popover[data-layout="tooltip"][data-arrow="top"]::before {
	top: -7px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 7px solid var(--background-color);
}

/* Pfeil unten — Popover oberhalb des Triggers */
.popover[data-layout="tooltip"][data-arrow="bottom"]::before {
	bottom: -7px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid var(--background-color);
}

/* Pfeil links — Popover rechts vom Trigger (Submenu) */
.popover[data-layout="tooltip"][data-arrow="left"]::before {
	left: -7px;
	top: 10px;
	transform: none;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 7px solid var(--background-color);
}

/* Pfeil rechts — Popover links vom Trigger (Submenu) */
.popover[data-layout="tooltip"][data-arrow="right"]::before {
	left: auto;
	right: -7px;
	top: 10px;
	transform: none;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 7px solid var(--background-color);
}

.submenu-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}