/**
 * AAPS — Collapsible nested tabs: icon state fix (companion to aaps-tabs-toggle.js)
 *
 * Elementor's widget-nested-tabs.css contains a touch-mode rule that swaps in the
 * ACTIVE icon whenever a non-selected tab title is :hover-ed:
 *
 *   .elementor-widget-n-tabs [data-touch-mode=true]
 *     .e-n-tab-title[aria-selected=false]:hover .e-n-tab-icon svg:last-child { ... }
 *
 * In stock Elementor that is harmless — a tap always opens the tab, so the icon
 * swap just "previews" the state the tap is about to create. But our toggle-to-
 * close scopes let a tap CLOSE the active tab, and on touchscreens the tapped
 * button keeps a sticky :hover until the user taps elsewhere — so a just-closed
 * tab kept showing the minus icon. Neutralize the swap inside the toggle scopes
 * only: the icon must follow aria-selected alone.
 *
 * The extra .e-n-tabs class out-specifies Elementor's bare [data-touch-mode=true]
 * selector regardless of stylesheet load order. Desktop ([data-touch-mode=false])
 * hover rules only recolor the icon and are left untouched.
 */

:is(.elementor-element-271fbd1, .elementor-element-8ce3c2a, .aaps-tabs-toggle)
	.e-n-tabs[data-touch-mode="true"]
	.e-n-tab-title[aria-selected="false"]:hover
	.e-n-tab-icon i:first-child {
	height: auto;
	opacity: 1;
	transform: none;
}

:is(.elementor-element-271fbd1, .elementor-element-8ce3c2a, .aaps-tabs-toggle)
	.e-n-tabs[data-touch-mode="true"]
	.e-n-tab-title[aria-selected="false"]:hover
	.e-n-tab-icon svg:first-child {
	height: var(--n-tabs-icon-size, var(--n-tabs-title-font-size));
	opacity: 1;
	transform: none;
}

:is(.elementor-element-271fbd1, .elementor-element-8ce3c2a, .aaps-tabs-toggle)
	.e-n-tabs[data-touch-mode="true"]
	.e-n-tab-title[aria-selected="false"]:hover
	.e-n-tab-icon i:last-child,
:is(.elementor-element-271fbd1, .elementor-element-8ce3c2a, .aaps-tabs-toggle)
	.e-n-tabs[data-touch-mode="true"]
	.e-n-tab-title[aria-selected="false"]:hover
	.e-n-tab-icon svg:last-child {
	height: 0;
	opacity: 0;
	transform: translateY(-100vh);
}