html[data-raz-color-mode] {
	background: var(--raz-body-bg);
}

body.raz-color-mode-enabled {
	background: var(--raz-body-bg);
	color: var(--raz-text-primary);
}

:where(body.raz-color-mode-enabled a) {
	color: var(--raz-link-color);
}

:where(body.raz-color-mode-enabled a:hover),
:where(body.raz-color-mode-enabled a:focus-visible) {
	color: var(--raz-link-hover-color);
}

body.raz-color-mode-enabled .eb-site-header--fallback,
body.raz-color-mode-enabled .eb-header-top,
body.raz-color-mode-enabled .eb-header-main,
body.raz-color-mode-enabled .nm-main-header,
body.raz-color-mode-enabled .eb-mobile-drawer,
body.raz-color-mode-enabled .nm-desktop-menu-drawer {
	background: var(--raz-header-bg);
	color: var(--raz-header-text);
	border-color: var(--raz-border-color);
}

body.raz-color-mode-enabled .eb-header-main[data-eb-sticky-header].is-sticky,
body.raz-color-mode-enabled.nm-header-sticky-active .eb-header-main[data-eb-sticky-header] {
	background: color-mix(in srgb, var(--raz-header-bg) 88%, transparent);
	border-color: var(--raz-border-color);
}

body.raz-color-mode-enabled .eb-feed-card,
body.raz-color-mode-enabled .eb-archive-card,
body.raz-color-mode-enabled .eb-archive-widget,
body.raz-color-mode-enabled .eb-post-nav__card,
body.raz-color-mode-enabled .eb-single-related-card,
body.raz-color-mode-enabled .eb-seo-author-box,
body.raz-color-mode-enabled .author-meta-card,
body.raz-color-mode-enabled .widget,
body.raz-color-mode-enabled .comments-area,
body.raz-color-mode-enabled .woocommerce div.product,
body.raz-color-mode-enabled .woocommerce-page div.product {
	background: var(--raz-card-bg);
	color: var(--raz-text-primary);
	border-color: var(--raz-border-color);
}

:where(body.raz-color-mode-enabled h1),
:where(body.raz-color-mode-enabled h2),
:where(body.raz-color-mode-enabled h3),
:where(body.raz-color-mode-enabled h4),
:where(body.raz-color-mode-enabled h5),
:where(body.raz-color-mode-enabled h6),
:where(body.raz-color-mode-enabled .entry-title),
:where(body.raz-color-mode-enabled .post-title),
:where(body.raz-color-mode-enabled .eb-article-title),
:where(body.raz-color-mode-enabled .section-title) {
	color: var(--raz-heading-color);
}

:where(body.raz-color-mode-enabled .eb-muted),
:where(body.raz-color-mode-enabled .post-excerpt),
:where(body.raz-color-mode-enabled .eb-article-excerpt),
:where(body.raz-color-mode-enabled .eb-card-meta),
:where(body.raz-color-mode-enabled .entry-meta),
:where(body.raz-color-mode-enabled .comment-metadata),
:where(body.raz-color-mode-enabled .woocommerce .price) {
	color: var(--raz-text-secondary);
}

:where(body.raz-color-mode-enabled input),
:where(body.raz-color-mode-enabled select),
:where(body.raz-color-mode-enabled textarea),
:where(body.raz-color-mode-enabled .eb-search-modal__input),
:where(body.raz-color-mode-enabled .eb-mobile-drawer__search-input),
:where(body.raz-color-mode-enabled .nm-desktop-menu-drawer__search-input) {
	background: var(--raz-input-bg);
	color: var(--raz-input-text);
	border-color: var(--raz-border-color);
}

:where(body.raz-color-mode-enabled input::placeholder),
:where(body.raz-color-mode-enabled textarea::placeholder) {
	color: color-mix(in srgb, var(--raz-input-text) 58%, transparent);
}

body.raz-color-mode-enabled .eb-search-modal__dialog,
body.raz-color-mode-enabled .eb-search-modal__form {
	background: var(--raz-card-bg);
	color: var(--raz-text-primary);
	border-color: var(--raz-border-color);
}

.raz-color-mode-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.65rem;
	block-size: 2.65rem;
	padding: 0;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--raz-header-text, currentColor) 16%, transparent);
	background: color-mix(in srgb, var(--raz-header-text, currentColor) 7%, transparent);
	color: var(--raz-header-text, currentColor);
	cursor: pointer;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.raz-color-mode-toggle:hover,
.raz-color-mode-toggle:focus-visible {
	border-color: var(--raz-accent-color);
	color: var(--raz-accent-color);
	background: color-mix(in srgb, var(--raz-accent-color) 12%, transparent);
	box-shadow: 0 8px 22px rgb(0 10 34 / 24%);
	outline: 2px solid transparent;
}

.raz-color-mode-toggle:focus-visible {
	outline: 2px solid var(--raz-accent-color);
	outline-offset: 3px;
}

.raz-color-mode-toggle__icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.raz-color-mode-toggle__icon svg {
	display: block;
	inline-size: 1.18rem;
	block-size: 1.18rem;
	fill: currentColor;
}

html[data-raz-color-mode='dark'] .raz-color-mode-toggle__icon--sun,
html[data-raz-color-mode='light'] .raz-color-mode-toggle__icon--moon {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

html[data-raz-color-mode='dark'] .raz-color-mode-toggle__icon--moon,
html[data-raz-color-mode='light'] .raz-color-mode-toggle__icon--sun {
	opacity: 0;
	transform: scale(0.78) rotate(18deg);
}

.eb-mobile-drawer__head-actions {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-inline-start: auto;
}

.eb-mobile-drawer__head-actions .raz-color-mode-toggle {
	inline-size: 2.55rem;
	block-size: 2.55rem;
	border-radius: 10px;
}

body.nm-header-sticky-active .raz-color-mode-toggle[data-raz-color-mode-context='desktop'],
.eb-header-main[data-eb-sticky-header].is-sticky .raz-color-mode-toggle[data-raz-color-mode-context='desktop'] {
	display: none;
}

body:not(.nm-header-sticky-active) .raz-color-mode-toggle[data-raz-color-mode-context='sticky'],
.eb-header-main[data-eb-sticky-header]:not(.is-sticky) .raz-color-mode-toggle[data-raz-color-mode-context='sticky'] {
	display: none;
}

@media (max-width: 1023px) {
	.eb-header-main__actions .raz-color-mode-toggle--desktop {
		display: none;
	}
}

@media (min-width: 1024px) {
	.eb-header-main__actions .raz-color-mode-toggle--mobile {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.raz-color-mode-toggle,
	.raz-color-mode-toggle__icon,
	body.raz-color-mode-enabled .eb-header-main[data-eb-sticky-header] {
		transition: none;
	}
}