/**
 * Digiknack thin scrollbar — 2px track, ~30px thumb.
 * Apply class `dk-scroll` (optional `dk-scroll--accent` for primary red thumb).
 */
:root {
  --dk-scroll-size: 2px;
  --dk-scroll-thumb: #060606;
  --dk-scroll-thumb-accent: var(--cal-accent, #f2133c);
  --dk-scroll-track: transparent;
}

.dk-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--dk-scroll-thumb) var(--dk-scroll-track);
}

.dk-scroll--accent {
  scrollbar-color: var(--dk-scroll-thumb-accent) var(--dk-scroll-track);
}

.dk-scroll::-webkit-scrollbar {
  width: var(--dk-scroll-size);
  height: var(--dk-scroll-size);
}

.dk-scroll::-webkit-scrollbar-track {
  background: var(--dk-scroll-track);
}

.dk-scroll::-webkit-scrollbar-thumb {
  background: var(--dk-scroll-thumb);
  border-radius: 1px;
  min-height: 30px;
  min-width: 30px;
}

.dk-scroll--accent::-webkit-scrollbar-thumb {
  background: var(--dk-scroll-thumb-accent);
}

.dk-scroll::-webkit-scrollbar-corner {
  background: transparent;
}

/* Prefer thin Digiknack scroll on admin when element opts in */
.admin-body .dk-scroll::-webkit-scrollbar {
  width: var(--dk-scroll-size);
  height: var(--dk-scroll-size);
}

.admin-body .dk-scroll::-webkit-scrollbar-thumb {
  min-height: 30px;
  background: var(--dk-scroll-thumb);
  border-radius: 1px;
}

.admin-body .dk-scroll--accent::-webkit-scrollbar-thumb {
  background: var(--dk-scroll-thumb-accent);
}