/* Three-state theme toggle component */
.theme-toggle {
  position: relative;
  width: 50px;
  height: 24px;
}

/* Hide the actual radio buttons */
.theme-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* The colored background "track" */
.theme-toggle .track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(156 163 175); /* gray-400 default */
  border-radius: 9999px;
  transition: background-color 0.3s ease;
}

/* The white circle "handle" (the slider) */
.theme-toggle .handle {
  position: absolute;
  top: 50%;
  left: 15px; /* Default to center (for system) */
  width: 20px;
  height: 20px;
  margin: 0; /* Reset any inherited margin */
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: left 0.3s ease, transform 0s;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* Three labels: each label covers 1/3 of the toggle width */
.theme-toggle label {
  position: absolute;
  top: 0;
  height: 100%;
  width: 33.333%;
  cursor: pointer;
  z-index: 20;
}

.theme-toggle .label-light {
  left: 0;
}
.theme-toggle .label-system {
  left: 33.333%;
}
.theme-toggle .label-dark {
  left: 66.666%;
}

/* Light mode => Light blue */
.theme-toggle input[value="light"]:checked ~ .track {
  background-color: rgb(59 130 246); /* blue-500 */
}
.theme-toggle input[value="light"]:checked ~ .handle {
  left: 2px; /* Far left */
}

/* System mode => Gray */
.theme-toggle input[value="system"]:checked ~ .track {
  background-color: rgb(156 163 175); /* gray-400 */
}
.theme-toggle input[value="system"]:checked ~ .handle {
  left: 15px; /* Center: (50px - 20px) / 2 = 15px */
}

/* Dark mode => Dark slate */
.theme-toggle input[value="dark"]:checked ~ .track {
  background-color: rgb(51 65 85); /* slate-700 */
}
.theme-toggle input[value="dark"]:checked ~ .handle {
  left: 28px; /* Far right: 50px - 20px - 2px = 28px */
}

/* Dark mode styles for the toggle itself when page is in dark mode */
.dark .theme-toggle .handle {
  background: #fff;
}

.dark .theme-toggle input[value="dark"]:checked ~ .handle {
  background: rgb(30 41 59); /* slate-800 */
}