/* Theme switcher toggle styling */
.toggle-checkbox {
  z-index: 20;
  transition: all 0.3s ease-in-out;
}

/* Make the checkbox more visible */
.toggle-checkbox:checked {
  right: 0;
  border: none;
  /* default */
  background-color: rgb(129, 124, 214);
  /* blue-600 */
  /* background-color: rgb(37, 99, 235); */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' className='h-10 w-10' fill='%23FFF' viewBox='0 0 24 24' stroke='rgb(129 124 214)' > <path strokeLinecap='round' strokeLinejoin='round' d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z' /> </svg>");
  transform: translateX(0);
}

.toggle-checkbox:not(:checked) {
  background-color: #fde68a; /* Yellow color when in light mode */
  border-color: #f59e0b;
}

.toggle-checkbox:checked:focus,
.toggle-checkbox:checked:hover {
  background-color: rgb(129, 124, 214);
}

/* .toggle-checkbox:checked + .toggle-label { */
  /* default */
  /* background-color: rgb(76, 73, 188); */
  /* blue-800 */
  /* background-color: rgb(30, 64, 175); */
  /* blue-900 */
  /* background-color: rgb(30, 58, 138); */
/* } */

/* Style the label that acts as the background */
.toggle-label {
  transition: background-color 0.3s ease;
  z-index: 10;
  background-color: #475569; /* Slate color */
  width: 2.5rem;
  height: 1.5rem;
  border-radius: 9999px;
}

/* Dark mode specific styles */
.tw-dark body {
  background-color: #1e293b;
  color: #f1f5f9;
}

/* Light mode specific styles */
.tw-light body {
  background-color: #ffffff;
  color: #1e293b;
}

/* Make sure the toggle is visible */
.tw-relative.tw-w-8.tw-h-8 {
  position: relative;
  width: 2.5rem !important;
  height: 1.5rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Add some debug info to the theme switcher to confirm it works */
#theme-switcher::after {
  content: attr(id);
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  white-space: nowrap;
  color: white;
  opacity: 0.7;
  display: none;
}