/* =========================================================
   Theme Switch (Mask / Reveal Slider)
   ========================================================= */

.theme-switch {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;

  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* =========================================================
   Track
   ========================================================= */

.track {
  width: 64px;
  height: 32px;
  background-color: var(--border-color);
  border-radius: 999px;

  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;

  padding: 4px;

  transition: background-color 0.25s ease;
}

/* =========================================================
   Emoji layer (always visible, no fading)
   ========================================================= */

.emoji {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  pointer-events: none;

  z-index: 1;
}

/* left (sun) */
.emoji-sun {
  left: 8px;
}

/* right (moon) */
.emoji-moon {
  right: 8px;
}

/* Optional slight depth so emojis feel embedded */
.emoji {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   Thumb (the "mask" / selector)
   ========================================================= */

.thumb {
  width: 30px;
  height: 30px;
  background-color: var(--bg-color);
  border-radius: 50%;

  position: relative;
  z-index: 3;

  transition: transform 0.25s ease, background-color 0.25s ease;

  /* gives “floating selector” feel */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* move thumb right in light mode */
.light .thumb {
  transform: translateX(32px);
}

/* =========================================================
   MASK EFFECT (key idea)
   ========================================================= */

/*
We simulate a "reveal focus" by making emojis
look stronger when near the thumb position.
*/

.track::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 50%;
  height: 100%;

  background: transparent;
  transition: transform 0.25s ease;

  z-index: 2;
  pointer-events: none;
}

/* move mask to right in light mode */
.light .track::after {
  transform: translateX(100%);
}

/* =========================================================
   Emoji emphasis based on theme (NOT fading, just emphasis)
   ========================================================= */

.light .emoji-moon {
  filter: drop-shadow(0 0 3px rgba(120, 160, 255, 0.45));
}

:not(.light) .emoji-sun {
  filter: drop-shadow(0 0 3px rgba(255, 200, 0, 0.45));
}

/* =========================================================
   Optional polish
   ========================================================= */

.theme-switch:hover .track {
/*  background-color: var(--border-color-highlight);*/
}

/* smoother thumb feel */
.thumb {
  will-change: transform;
}