/* -------------------------------------------------------------------------------- */
/* Theme Toggle */
/* -------------------------------------------------------------------------------- */

.theme-toggle {
	position: fixed;
	right: var(--space-5);
	bottom: var(--space-5);
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	padding: 0;
	border: 1px solid var(--color-border-main);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface);
	color: var(--color-text-main);
	box-shadow: var(--card-shadow-hover);
	cursor: pointer;
	transition:
		transform var(--transition-fast),
		background-color var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
	transform: translateY(-0.1rem);
	border-color: var(--color-border-strong);
	background-color: var(--color-surface-subtle);
	box-shadow: var(--shadow-md);
}

.theme-toggle:focus-visible {
	outline: none;
	box-shadow:
		var(--focus-ring-strong),
		var(--shadow-md);
}

.theme-toggle-icon {
	position: absolute;
	font-size: 1.7rem;
	line-height: 1;
	transition:
		opacity var(--transition-fast),
		transform var(--transition-fast);
}

.theme-toggle-icon-sun {
	opacity: 1;
	transform: scale(1);
}

.theme-toggle-icon-moon {
	opacity: 0;
	transform: scale(0.75);
}

html.dark-mode .theme-toggle-icon-sun {
	opacity: 0;
	transform: scale(0.75);
}

html.dark-mode .theme-toggle-icon-moon {
	opacity: 1;
	transform: scale(1);
}

@media (max-width: 43.75rem) {
	.theme-toggle {
		right: var(--space-4);
		bottom: var(--space-4);
		width: 4rem;
		height: 4rem;
	}
}