/**
 * Wallex Elementor Theme Image – Frontend & Editor Styles
 * Supports seamless switching between Light and Dark mode images and links.
 * Compatible with Wallex Token Style (:root[theme-mode="dark"]), data-theme, and prefers-color-scheme.
 *
 * @package Wallex_Core
 */

/* Container wrapper setup */
.wallex-has-theme-image {
	display: contents;
}

/* Theme mode wrapper containers */
.wallex-theme-mode {
	display: contents;
}

/* ==========================================================================
   Default State (Light Mode)
   ========================================================================== */
.wallex-theme-mode--light {
	display: contents;
}

.wallex-theme-mode--dark {
	display: none !important;
}

/* Explicit Light Mode */
:root[theme-mode="light"] .wallex-theme-mode--dark,
html[theme-mode="light"] .wallex-theme-mode--dark,
[theme-mode="light"] .wallex-theme-mode--dark,
html[data-theme="light"] .wallex-theme-mode--dark,
[data-theme="light"] .wallex-theme-mode--dark {
	display: none !important;
}

:root[theme-mode="light"] .wallex-theme-mode--light,
html[theme-mode="light"] .wallex-theme-mode--light,
[theme-mode="light"] .wallex-theme-mode--light,
html[data-theme="light"] .wallex-theme-mode--light,
[data-theme="light"] .wallex-theme-mode--light {
	display: contents !important;
}

/* ==========================================================================
   Dark Mode Active
   Supports: :root[theme-mode="dark"], html[theme-mode="dark"],
   [data-theme="dark"], body.dark-mode, body.dark, [data-bs-theme="dark"]
   ========================================================================== */
:root[theme-mode="dark"] .wallex-theme-mode--light,
html[theme-mode="dark"] .wallex-theme-mode--light,
[theme-mode="dark"] .wallex-theme-mode--light,
html[data-theme="dark"] .wallex-theme-mode--light,
[data-theme="dark"] .wallex-theme-mode--light,
body.dark-mode .wallex-theme-mode--light,
body.dark .wallex-theme-mode--light,
[data-bs-theme="dark"] .wallex-theme-mode--light {
	display: none !important;
}

:root[theme-mode="dark"] .wallex-theme-mode--dark,
html[theme-mode="dark"] .wallex-theme-mode--dark,
[theme-mode="dark"] .wallex-theme-mode--dark,
html[data-theme="dark"] .wallex-theme-mode--dark,
[data-theme="dark"] .wallex-theme-mode--dark,
body.dark-mode .wallex-theme-mode--dark,
body.dark .wallex-theme-mode--dark,
[data-bs-theme="dark"] .wallex-theme-mode--dark {
	display: contents !important;
}

/* ==========================================================================
   OS System Preference Fallback (prefers-color-scheme: dark)
   Applies only when Light Mode is NOT explicitly forced on root or body.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root:not([theme-mode="light"]):not([data-theme="light"]):not(.light) body:not(.light) .wallex-theme-mode--light {
		display: none !important;
	}

	:root:not([theme-mode="light"]):not([data-theme="light"]):not(.light) body:not(.light) .wallex-theme-mode--dark {
		display: contents !important;
	}
}

/* ==========================================================================
   Elementor Editor Live Preview Overrides
   Allows forcing Light or Dark mode preview within Elementor editor canvas.
   ========================================================================== */
.wallex-preview--dark .wallex-theme-mode--light,
.elementor-element.wallex-preview--dark .wallex-theme-mode--light {
	display: none !important;
}

.wallex-preview--dark .wallex-theme-mode--dark,
.elementor-element.wallex-preview--dark .wallex-theme-mode--dark {
	display: contents !important;
}

.wallex-preview--light .wallex-theme-mode--dark,
.elementor-element.wallex-preview--light .wallex-theme-mode--dark {
	display: none !important;
}

.wallex-preview--light .wallex-theme-mode--light,
.elementor-element.wallex-preview--light .wallex-theme-mode--light {
	display: contents !important;
}