/* Belt — single-line horizontal / vertical scrollport (overlay thumbs). */

.ui-belt {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

.ui-belt--horizontal {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
}

.ui-belt--vertical {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Fixed card width so several sit in one row; scroll when they overflow. */
.ui-belt--horizontal > * {
  flex: 0 0 22rem;
  width: 22rem;
  max-width: 85%;
  min-width: 0;
  box-sizing: border-box;
}

.ui-belt--vertical > * {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

.ui-belt--fill {
  height: 100%;
}