/* Enable Theme Toggle Functionality */

/* Remove disabled state from toggle button */
.toggleButtonDisabled_aARS {
  cursor: pointer !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Enable the toggle button */
.toggleButton_gllP[disabled] {
  cursor: pointer !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Remove disabled attribute styling */
button[disabled].toggleButton_gllP {
  cursor: pointer !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Ensure the toggle container is visible and functional */
.colorModeToggle_DEke {
  display: block !important;
}

/* Add hover effects to show the button is clickable */
.toggleButton_gllP:hover {
  background: var(--ifm-color-emphasis-200) !important;
  transform: scale(1.05);
  transition: all 0.2s ease;
}

/* Dark theme specific hover */
[data-theme="dark"] .toggleButton_gllP:hover {
  background: var(--ifm-color-gray-800) !important;
}

/* Ensure the button icons are visible */
.lightToggleIcon_pyhR,
.darkToggleIcon_wfgR {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Remove any disabled styling from the button */
.toggleButton_gllP {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Make sure the button responds to clicks */
.toggleButton_gllP:active {
  transform: scale(0.95);
}