/* Quarto-like Theme Slider Toggle */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Hide native checkbox but keep it accessible */
.theme-toggle__checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* The label holds icons + track */
.theme-toggle__label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Icons */
.theme-toggle__icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--color-text);
  transition: color .2s ease, transform .2s ease;
  flex-shrink: 0;
}

.theme-toggle__icon--sun { transform: translateY(0); }
.theme-toggle__icon--moon { transform: translateY(0); }

/* Track */
.theme-toggle__track {
  position: relative;
  width: 46px;
  height: 26px;
  background: var(--gray-200);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-border) 40%, transparent);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  display: inline-block;
}

/* Thumb */
.theme-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
  will-change: transform;
}

/* Checked state moves the thumb to the right */
.theme-toggle__checkbox:checked + .theme-toggle__label .theme-toggle__thumb {
  transform: translateX(20px);
}

/* Color tweaks when dark mode is ON */
:root[data-theme="dark"] .theme-toggle__track {
  background: #1f2630;
  border-color: #2a3240;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
:root[data-theme="dark"] .theme-toggle__thumb {
  background: #0e1116;
  border-color: #232a34;
}

/* Hover / focus styles */
.theme-toggle__label:hover .theme-toggle__thumb {
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

.theme-toggle__checkbox:focus-visible + .theme-toggle__label .theme-toggle__track {
  outline: 2px solid color-mix(in srgb, var(--color-brand) 45%, transparent);
  outline-offset: 3px;
  transition: outline-color .2s ease;
}

/* Slight scale on icons when active */
.theme-toggle__checkbox:not(:checked) + .theme-toggle__label .theme-toggle__icon--sun,
.theme-toggle__checkbox:checked + .theme-toggle__label .theme-toggle__icon--moon {
  transform: scale(1.08);
}

/* Compact variant if needed
.theme-toggle--compact .theme-toggle__track { width: 40px; height: 22px; }
.theme-toggle--compact .theme-toggle__thumb { width: 18px; height: 18px; top: 2px; left: 2px; }
.theme-toggle--compact .theme-toggle__checkbox:checked + .theme-toggle__label .theme-toggle__thumb { transform: translateX(18px); }
*/
``