/**
 * Max2 Floating Icons – Frontend
 * Bar fixed rechts; jedes Icon fährt individuell bei eigenem Hover aus.
 * Shadow am Icon-Element (wie Original), blutet beim Ausfahren in den Balken.
 */

.max2-floating-icons-bar {
	position: fixed;
	top: var(--max2-fi-top, 50%);
	right: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

/* Alle Link-Zustände – verhindert Theme-Underlines, Farben, Borders */
.max2-floating-icons-item,
.max2-floating-icons-item:link,
.max2-floating-icons-item:visited,
.max2-floating-icons-item:hover,
.max2-floating-icons-item:focus,
.max2-floating-icons-item:active {
	color: var(--max2-fi-color, #fff) !important;
	text-decoration: none !important;
	border: none !important;
	outline: none;
	background: var(--max2-fi-bg, #e67e22);
}

/* Sichtbarer Focus-Ring für Tastatur-Navigation (Accessibility) */
.max2-floating-icons-item:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

.max2-floating-icons-item {
	display: flex;
	flex-direction: row-reverse; /* icon rechts, label links */
	align-items: center;
	justify-content: flex-start;
	width: var(--max2-fi-height, 56px);
	min-width: var(--max2-fi-height, 56px);
	height: var(--max2-fi-height, 56px);
	padding: 0;
	white-space: nowrap;
	transition: width 0.3s ease-in-out;
	box-sizing: border-box;
	cursor: pointer;
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	letter-spacing: normal;
	box-shadow: none;
}

/* Individuell ausfahren beim Hover des jeweiligen Items */
.max2-floating-icons-item:hover,
.max2-floating-icons-item:focus {
	width: calc(var(--max2-fi-height, 56px) + var(--max2-fi-expand, 224px));
}

.max2-floating-icons-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--max2-fi-height, 56px);
	height: var(--max2-fi-height, 56px);
	font-size: var(--max2-fi-size, 24px);
	/* Shadow am Icon-Quadrat – sichtbar im collapsed & expanded Zustand */
	box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px 0px;
}

.max2-floating-icons-icon i {
	font-size: inherit;
}

.max2-floating-icons-label {
	max-width: 0;
	overflow: hidden;
	padding: 0;
	font-size: 0.95em;
	opacity: 0;
	transition: max-width 0.3s ease-in-out, opacity 0.6s ease-in-out, padding 0.3s ease-in-out;
	box-sizing: border-box;
}

.max2-floating-icons-item:hover .max2-floating-icons-label,
.max2-floating-icons-item:focus .max2-floating-icons-label {
	max-width: var(--max2-fi-expand, 224px);
	opacity: 1;
	padding-left: var(--max2-fi-label-pl, 12px);
	padding-right: 8px;
}