#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;
}