/* ===========================================================
   RewardRace — Theme Toggle v2
   =========================================================== */

.rrew-theme-toggle {
	--rrew-tt-size: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--rr-dur-fast) var(--rr-ease-out);
}
.rrew-theme-toggle:active { transform: scale(.94); }
.rrew-theme-toggle:focus-visible { outline: none; }
.rrew-theme-toggle:focus-visible .rrew-theme-toggle__track {
	box-shadow: var(--rr-ring);
}

.rrew-theme-toggle--icon .rrew-theme-toggle__track {
	width: var(--rrew-tt-size);
	height: var(--rrew-tt-size);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rr-surface);
	border: 1px solid var(--rr-border);
	transition: background-color var(--rr-dur-base) var(--rr-ease-out),
	            border-color var(--rr-dur-base) var(--rr-ease-out),
	            box-shadow var(--rr-dur-base) var(--rr-ease-out);
}
.rrew-theme-toggle--icon:hover .rrew-theme-toggle__track {
	background: var(--rr-brand-tint);
	border-color: var(--rr-brand);
}

.rrew-theme-toggle--icon .rrew-theme-toggle__thumb {
	width: 60%;
	height: 60%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.rrew-theme-toggle--switch .rrew-theme-toggle__track {
	position: relative;
	width: calc(var(--rrew-tt-size) * 1.85);
	height: var(--rrew-tt-size);
	border-radius: var(--rr-radius-pill);
	background: var(--rr-surface-2);
	border: 1px solid var(--rr-border);
	transition: background-color var(--rr-dur-base) var(--rr-ease-out),
	            border-color var(--rr-dur-base) var(--rr-ease-out);
}

.rrew-theme-toggle--switch .rrew-theme-toggle__thumb {
	position: absolute;
	top: 50%;
	left: 4px;
	transform: translateY(-50%);
	width: calc(var(--rrew-tt-size) - 10px);
	height: calc(var(--rrew-tt-size) - 10px);
	border-radius: 50%;
	background: var(--rr-bg);
	box-shadow: var(--rr-shadow-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: left var(--rr-dur-base) var(--rr-ease-spring),
	            background-color var(--rr-dur-base) var(--rr-ease-out),
	            color var(--rr-dur-base) var(--rr-ease-out);
	color: var(--rr-ink);
}

.rrew-theme-toggle__icon {
	width: 60%;
	height: 60%;
	position: absolute;
	transition: opacity var(--rr-dur-base) var(--rr-ease-out),
	            transform var(--rr-dur-base) var(--rr-ease-out);
}

.rrew-theme-toggle__icon--moon { opacity: 0; transform: rotate(-90deg) scale(.6); }
.rrew-theme-toggle__icon--sun  { opacity: 1; transform: rotate(0) scale(1); color: var(--rr-warning); }

html[data-theme="dark"] .rrew-theme-toggle--switch .rrew-theme-toggle__thumb {
	left: calc(100% - var(--rrew-tt-size) + 6px);
	background: var(--rr-brand-gradient);
	color: #FFFFFF;
}

html[data-theme="dark"] .rrew-theme-toggle__icon--sun {
	opacity: 0;
	transform: rotate(90deg) scale(.6);
}

html[data-theme="dark"] .rrew-theme-toggle__icon--moon {
	opacity: 1;
	transform: rotate(0) scale(1);
	color: #FFFFFF;
}