/**
 * BuddyBoss fades non-current icons only when the BuddyPanel is expanded.
 * Keep the collapsed panel's full-opacity icon treatment in both states.
 */
body.bb-template-v2.buddypanel-open .buddypanel .side-panel-inner .buddypanel-menu > li:not(.bb-menu-section) > a.bb-menu-item > i:not(.bb-icon-angle-down) {
	opacity: 1;
}

/*
 * BuddyBoss moves each menu row 12px when the panel state changes. Counter
 * that immediate layout shift, then animate the icon into its new position in
 * step with the panel width transition. The `buddypanel-transtioned` class is
 * added after an intentional toggle, so this does not animate on page load.
 */
body.bb-template-v2.buddypanel-transtioned {
	--abbey-buddypanel-icon-open-offset: -12px;
	--abbey-buddypanel-icon-close-offset: 12px;
}

body.bb-template-v2.bb-buddypanel-right.buddypanel-transtioned {
	--abbey-buddypanel-icon-open-offset: 12px;
	--abbey-buddypanel-icon-close-offset: -12px;
}

body.bb-template-v2.buddypanel-transtioned.buddypanel-open .buddypanel .side-panel-inner .buddypanel-menu > li:not(.bb-menu-section) > a.bb-menu-item > i:not(.bb-icon-angle-down) {
	animation: abbey-buddypanel-icon-open 200ms ease both;
	backface-visibility: hidden;
}

body.bb-template-v2.buddypanel-transtioned:not(.buddypanel-open) .buddypanel .side-panel-inner .buddypanel-menu > li:not(.bb-menu-section) > a.bb-menu-item > i:not(.bb-icon-angle-down) {
	animation: abbey-buddypanel-icon-close 200ms ease both;
	backface-visibility: hidden;
}

@keyframes abbey-buddypanel-icon-open {
	from {
		transform: translateX(var(--abbey-buddypanel-icon-open-offset));
	}

	to {
		transform: translateX(0);
	}
}

@keyframes abbey-buddypanel-icon-close {
	from {
		transform: translateX(var(--abbey-buddypanel-icon-close-offset));
	}

	to {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.bb-template-v2.buddypanel-transtioned .buddypanel .side-panel-inner .buddypanel-menu > li:not(.bb-menu-section) > a.bb-menu-item > i:not(.bb-icon-angle-down) {
		animation: none;
	}
}