/**
 * EICK.IT – EU AI Act Bildkennzeichnung (Frontend)
 *
 * Die Variablen werden serverseitig aus den Plugin-Einstellungen gesetzt.
 */

:root {
	--eickit-ai-size: 24px;
	--eickit-ai-offset: 8px;
	--eickit-ai-bg: rgba( 0, 0, 0, .62 );
	--eickit-ai-fg: #fff;
	--eickit-ai-radius: 50%;
}

/* Hilfs-Wrapper, nur wenn ein Container mehrere Bilder enthält. */
.eickit-ai-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

/* Container, der von Haus aus static positioniert war. */
.eickit-ai-anchor {
	position: relative;
}

.eickit-ai-badge {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	box-sizing: content-box;
	width: var( --eickit-ai-size );
	height: var( --eickit-ai-size );
	padding: 0;
	border-radius: var( --eickit-ai-radius );
	background: var( --eickit-ai-bg );
	color: var( --eickit-ai-fg );
	line-height: 0;
	text-decoration: none;
	cursor: help;
	backdrop-filter: blur( 2px );
	-webkit-backdrop-filter: blur( 2px );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .25 );
	transition: background-color .15s ease;
}

.eickit-ai-badge:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.eickit-ai-badge__icon {
	width: 100%;
	height: 100%;
	padding: 18%;
	box-sizing: border-box;
	fill: currentColor;
	pointer-events: none;
}

/* -----------------------------------------------------------------
 * Badge-Position
 *
 * Jede Position legt zugleich fest, in welche Richtung der Tooltip
 * aufklappt: immer zur Bildmitte hin, damit ihn ein Container mit
 * overflow: hidden nicht abschneidet.
 * -------------------------------------------------------------- */

.eickit-ai-badge--top-left {
	top: var( --eickit-ai-offset );
	left: var( --eickit-ai-offset );
}

.eickit-ai-badge--top-right {
	top: var( --eickit-ai-offset );
	right: var( --eickit-ai-offset );
}

.eickit-ai-badge--bottom-left {
	bottom: var( --eickit-ai-offset );
	left: var( --eickit-ai-offset );
}

.eickit-ai-badge--bottom-right {
	bottom: var( --eickit-ai-offset );
	right: var( --eickit-ai-offset );
}

/* -----------------------------------------------------------------
 * Tooltip mit dem Klartext-Hinweis
 * -------------------------------------------------------------- */

.eickit-ai-badge__text {
	position: absolute;
	z-index: 1;
	box-sizing: border-box;
	padding: 4px 8px;
	border-radius: 4px;
	background: var( --eickit-ai-bg );
	color: var( --eickit-ai-fg );
	font-size: 12px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.35;
	text-align: left;
	/* Ohne nowrap würde der Text auf die Badge-Breite umbrechen – das Badge
	   ist der Containing Block des Tooltips. */
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY( var( --eickit-ai-tip-y, 0 ) );
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	backdrop-filter: blur( 2px );
	-webkit-backdrop-filter: blur( 2px );
}

/* Badge oben  -> Tooltip klappt nach unten auf. */
.eickit-ai-badge--top-left .eickit-ai-badge__text,
.eickit-ai-badge--top-right .eickit-ai-badge__text {
	top: calc( 100% + 6px );
	--eickit-ai-tip-y: -4px;
}

/* Badge unten -> Tooltip klappt nach oben auf. */
.eickit-ai-badge--bottom-left .eickit-ai-badge__text,
.eickit-ai-badge--bottom-right .eickit-ai-badge__text {
	bottom: calc( 100% + 6px );
	--eickit-ai-tip-y: 4px;
}

/* Badge links  -> Tooltip bündig an der linken Badge-Kante. */
.eickit-ai-badge--top-left .eickit-ai-badge__text,
.eickit-ai-badge--bottom-left .eickit-ai-badge__text {
	left: 0;
}

/* Badge rechts -> Tooltip bündig an der rechten Badge-Kante. */
.eickit-ai-badge--top-right .eickit-ai-badge__text,
.eickit-ai-badge--bottom-right .eickit-ai-badge__text {
	right: 0;
}

.eickit-ai-badge:hover .eickit-ai-badge__text,
.eickit-ai-badge:focus .eickit-ai-badge__text,
.eickit-ai-badge:focus-visible .eickit-ai-badge__text,
.eickit-ai-badge.is-open .eickit-ai-badge__text {
	opacity: 1;
	visibility: visible;
	--eickit-ai-tip-y: 0;
}

/* Druckausgabe: Kennzeichnung sichtbar halten. */
@media print {
	.eickit-ai-badge {
		background: #000 !important;
		color: #fff !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.eickit-ai-badge,
	.eickit-ai-badge__text {
		transition: none;
	}
}