/* ── Pixel Switch ─────────────────────────────────
   Images: 27×10 base, 8×7 button (native pixels)
   Scale with --px-scale (default 3x)

   HTML:
   <label class="px-switch">
     <input class="px-switch__input" type="checkbox" role="switch" aria-label="..." />
     <span class="px-switch__ui" aria-hidden="true"></span>
     <span class="px-switch__label">Label</span>
   </label>

   Add class "px-switch--native" to <label> to show the
   raw checkbox instead of the pixel art.
──────────────────────────────────────────────────── */

.px-switch {
  --px-scale: 3;
  --track-w: calc(27 * var(--px-scale) * 1px);
  --track-h: calc(10 * var(--px-scale) * 1px);
  --thumb-w: calc(8 * var(--px-scale) * 1px);
  --thumb-h: calc(7 * var(--px-scale) * 1px);
  /* how far the thumb travels: track width − thumb width − gutters */
  --thumb-travel: calc(
    var(--track-w) - var(--thumb-w) - 4 * var(--px-scale) * 1px
  );

  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

/* ── Hidden real input ── */
.px-switch__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

/* ── Track (base image) ── */
.px-switch__ui {
  position: relative;
  flex: 0 0 auto;
  width: var(--track-w);
  height: var(--track-h);
  background: url("/img/ui/slider/slider-base.png") no-repeat center / 100% 100%;
  image-rendering: pixelated;
}

/* ── Thumb (button image) ── */
.px-switch__ui::after {
  content: "";
  position: absolute;
  top: calc(var(--px-scale) * -1px);
  left: calc(var(--px-scale) * 3px);
  width: var(--thumb-w);
  height: var(--thumb-h);
  background: url("/img/ui/slider/slider-button.png") no-repeat center / 100%
    100%;
  image-rendering: pixelated;
  transition: left 100ms steps(5, end);
}

/* ── Checked ── */
.px-switch__input:checked + .px-switch__ui::after {
  left: calc(var(--thumb-travel) + var(--px-scale) * 1px);
}

/* ── Focus-visible ── */
.px-switch__input:focus-visible + .px-switch__ui {
  outline: 3px solid #ffd54a;
  outline-offset: 3px;
}

/* ── Hover ── */
.px-switch:hover .px-switch__ui::after {
  filter: brightness(1.08);
}

/* ── Active / pressed ── */
.px-switch:active .px-switch__ui {
  /* transform: translateY(1px); */
}

/* ── Disabled ── */
.px-switch:has(.px-switch__input:disabled) {
  cursor: not-allowed;
}
.px-switch__input:disabled + .px-switch__ui {
  opacity: 0.5;
  filter: grayscale(0.3);
}
.px-switch__input:disabled ~ .px-switch__label {
  opacity: 0.5;
}

/* ── Native mode: show raw checkbox, hide pixel art ── */
.px-switch--native .px-switch__input {
  position: static;
  opacity: 1;
  width: auto;
  height: auto;
  pointer-events: auto;
}
.px-switch--native .px-switch__ui {
  display: none;
}

/* NOT FOR SLIDER */

.pixel-border {
  font-size: 14px;
  padding: 8px 10px;
  box-shadow:
    inset -3px -3px 0 #626273,
    inset 3px 3px 0 #38374a;
  caret-color: #5aa647;
  border: 2px solid #1f1e30;
}

.pixel-border:focus-visible {
  outline: 2px solid #5aa647;
  outline-offset: 2px;
}