/* Caboodle – Copyright (C) 2026 the Caboodle authors – GNU GPL v3, see LICENSE.txt
   SPDX-License-Identifier: GPL-3.0-only */
/* The strip of page previews (shared/thumbs.js): Slide show slides, Wireframe and PDF pages, Spreadsheet sheets. */
/* the scroll bar's room is always kept, so the previews don't change size (and flicker) when it appears */
.th-strip { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; padding: 10px 8px 24px 4px; display: flex; flex-direction: column; gap: 8px; outline: none; }
.th-item { display: flex; gap: 6px; align-items: flex-start; padding: 4px 6px 4px 2px; border-radius: 8px; cursor: pointer; outline: none; position: relative; flex: none; }
.th-item:hover { background: var(--line-soft); }
.th-item.sel { background: var(--prog-soft); }
.th-item:focus-visible { box-shadow: 0 0 0 2px var(--prog); }
.th-num { flex: none; width: 18px; text-align: right; font-size: 11.5px; color: var(--muted); padding-top: 2px; font-variant-numeric: tabular-nums; }
.th-frame { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.th-box { position: relative; flex: none; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px #d4d4da; border-radius: 2px; }
.th-item.cur .th-box { box-shadow: 0 0 0 2.5px var(--prog); }
.th-item.hidden-item .th-box { opacity: 0.45; }
.th-item.hidden-item .th-num { text-decoration: line-through; }
.th-cap { align-self: stretch; display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12px; line-height: 1.3; }
.th-cap-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.th-item.cur .th-cap-name { font-weight: 600; color: var(--prog-strong); }
.th-cap-meta { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.th-cap input { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 1px 4px; border: 1px solid var(--prog); border-radius: 4px; }
.th-item.drop-before::before, .th-item.drop-after::after { content: ''; position: absolute; left: 22px; right: 4px; height: 3px; border-radius: 2px; background: var(--prog); }
.th-item.drop-before::before { top: -5px; }
.th-item.drop-after::after { bottom: -5px; }
.th-add { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 6px 0 26px; height: 34px; border: 1.5px dashed var(--line-strong); border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.th-add:hover { border-color: var(--prog); color: var(--prog-strong); background: var(--prog-soft); }
.th-add .material-symbols-outlined { font-size: 18px; }
@media (max-width: 700px) {
  .th-strip { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 8px; }
  .th-item.drop-before::before, .th-item.drop-after::after { top: 4px; bottom: 4px; left: auto; right: auto; width: 3px; height: auto; }
  .th-item.drop-before::before { left: -5px; }
  .th-item.drop-after::after { right: -5px; }
  .th-add { margin: 0; width: 46px; height: auto; flex-direction: column; font-size: 0; }
  .th-add .material-symbols-outlined { font-size: 22px; }
}
/* a colour of its own (a sheet's tab colour): a band along the top of the preview */
.th-box::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 1; background: var(--th-color, transparent); pointer-events: none; }