.zoom-slider {
  --fill: 0%;
  appearance: none;
  -webkit-appearance: none;
  width: 120px;
  height: 26px;
  margin: 0 4px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.zoom-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, #8f889f 0%, #8f889f var(--fill), var(--c-line) var(--fill), var(--c-line) 100%);
}
.zoom-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, #8f889f 0%, #8f889f var(--fill), var(--c-line) var(--fill), var(--c-line) 100%);
}
.zoom-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px #0006;
}
.zoom-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px #0006;
}
.zoom-slider:focus-visible { outline: none; }
.zoom-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.zoom-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.statusbar #zoom-btn {
  min-width: 44px;
  justify-content: center;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font-size: 12px;
}
.statusbar #zoom-btn:hover { background: #312c3d; }
@media (max-width: 640px) { .zoom-slider { display: none; } }

#zoom-pop [data-zoom="fit"][aria-checked="true"]::before { content: "\2713"; color: var(--accent); }
#zoom-pop [data-zoom="fit"] kbd { margin-left: auto; }