#theme-toggle {
	position: relative;
	z-index: 0;
	width: 4rem; /* 2 units */
	height: 2rem; /* 1 unit */
	border-radius: 2rem; /* This creates the pill shape */
	background-color: #87ceeb; /* A nice sky blue for day time */
	border: 1px solid var(--text-color);
	cursor: pointer;
	transition:
		background-color 0.3s ease-in-out,
		border-color 0.3s ease-in-out;
	padding: 0;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

/* The sliding circle element */
#theme-toggle .thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(
		2rem -
		6px
	); /* Height of parent minus top/bottom border/padding */
	height: calc(2rem - 6px);
	background-color: var(--light);
	border-radius: 50%;
	transition: transform 0.3s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* General icon styling */
#theme-toggle .thumb svg {
	font-size: 1rem;
	transition: color 0.3s ease-in-out;
}

/* By default, show the sun and hide the moon */
#theme-toggle .thumb .sun {
	display: block;
	color: var(--dark); /* Sun color */
}

#theme-toggle .thumb .moon {
	display: none;
	color: var(--light); /* Moon color */
}

/* --- Dark Mode Styles --- */
html.dark #theme-toggle {
	background-color: #2c3e50; /* A dark navy blue for night time */
}

/* In dark mode, slide the thumb to the right */
html.dark #theme-toggle .thumb {
	transform: translateX(
		2rem
	); /* Slides the thumb to the right by the width of the toggle */
}

/* In dark mode, hide the sun and show the moon */
html.dark #theme-toggle .thumb .sun {
	display: none;
}

html.dark #theme-toggle .thumb .moon {
	display: block;
}

html.dark #theme-toggle .thumb {
	background-color: var(--dark);
}

#theme-toggle:hover {
	border-color: transparent;
}

#theme-toggle::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -1px;
	border-radius: 2rem;
	background: linear-gradient(
		to right,
		var(--primary-start),
		var(--primary-end)
	);
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

#theme-toggle:hover::before {
	opacity: 1;
}