/* =========================================================================
   Day and night, by hand

   A short vertical slider over the opening screen: day at the top, night
   at the foot, the sun setting as you drag it down. The thumb is a glass
   chip that carries a sun by day and a moon by night, crossing over as it
   travels; the track warms toward the top and cools toward the foot, in
   the page's gold and its LED blue. It follows the backdrop's own cycle
   and can be dragged to any point of it — src/js/ui/daylight.js.

   --v is how far into the night it is, 0 to 1, written by the script.
   ========================================================================= */

.daylight {
  --v: 0;
  --track: clamp(6.5rem, 16vh, 10rem);
  --thumb: 2.25rem;

  display: grid;
  justify-items: center;
  gap: var(--space-2);
  justify-self: end;
  padding: var(--space-1);
  color: var(--c-ink-3);
  cursor: grab;
  touch-action: none;          /* the drag is ours, not the page's scroll */
  user-select: none;
  -webkit-user-select: none;
}

.daylight.is-dragging {
  cursor: grabbing;
}

/* the sun and moon marking the two ends */
.daylight__end {
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.daylight__end--moon {
  fill: currentColor;
  stroke: none;
  opacity: 0.55;
}

/* the track: a lit line, warm at the top and cool at the foot */
.daylight__track {
  position: relative;
  display: block;
  width: var(--thumb);
  height: var(--track);
}

.daylight__track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  translate: -50% 0;
  background: linear-gradient(180deg,
    rgb(214 179 106 / 0.75),
    rgb(216 241 255 / 0.45) 55%,
    rgb(127 211 255 / 0.55));
  box-shadow: 0 0 10px var(--c-led-glow);
}

/* the thumb: glass, carrying whichever of the two it is closer to */
.daylight__thumb {
  position: absolute;
  left: 0;
  top: calc(var(--v) * (100% - var(--thumb)));
  display: grid;
  place-items: center;
  width: var(--thumb);
  height: var(--thumb);
  border: 1px solid rgb(255 255 255 / 0.13);
  border-radius: 50%;
  color: var(--c-white);
  /* the page's glass (tokens.css), and low inside it a soft wash of the
     time of day: warm by day, cool by night */
  background:
    radial-gradient(90% 80% at 50% 125%,
      color-mix(in oklab,
        rgb(214 179 106 / 0.55) calc((1 - var(--v)) * 100%),
        rgb(127 211 255 / 0.55)),
      transparent 75%),
    var(--glass-frost),
    rgb(255 255 255 / 0.04);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-edge), 0 6px 18px -8px rgb(0 0 0 / 0.6);
  transition: border-color 0.3s ease;
}

.daylight__thumb svg {
  grid-area: 1 / 1;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.daylight__sun {
  opacity: calc(1 - var(--v));
  rotate: calc(var(--v) * 90deg);
}

.daylight__moon {
  fill: currentColor;
  stroke: none;
  opacity: var(--v);
  rotate: calc((1 - var(--v)) * -40deg);
}

@media (hover: hover) {
  .daylight:hover .daylight__thumb {
    border-color: rgb(255 255 255 / 0.24);
  }
}

.daylight:focus-visible {
  outline: none;
}

.daylight:focus-visible .daylight__thumb {
  outline: 1px solid var(--c-led-core);
  outline-offset: 3px;
}