/* tabs-scroll.css - v2.0
   MkDocs Material — tabs overflow + ALWAYS-VISIBLE custom scrollbar
   macOS overlay scrollbar-safe
   
   Requires: docs/javascripts/tabs-scrollbar.js
*/

/* === CRITICAL: Force tab containers to allow shrinking (like Mermaid fix) === */
.md-tabs,
.md-tabs__inner,
.md-tabs__list {
  min-width: 0 !important;
}

/* === Enable horizontal scroll on the actual list container === */
.md-tabs__list {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  /* Hide native scrollbar - we use custom one */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.md-tabs__list::-webkit-scrollbar {
  display: none;
}

/* Keep individual tabs from shrinking */
.md-tabs__item {
  flex: 0 0 auto !important;
}
.md-tabs__link {
  white-space: nowrap;
}

/* === Custom scrollbar wrapper (inserted by JS after .md-tabs) === */
.md-tabs__fakebar-wrap {
  background: var(--md-primary-fg-color);
  padding: 0.25rem 0 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* Visible custom scrollbar track */
.md-tabs__fakebar {
  height: 10px;
  margin: 0 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  touch-action: pan-x;
}

/* Scrollbar thumb */
.md-tabs__fakebar-thumb {
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  min-width: 44px;
  transform: translateX(0);
  transition: background 0.15s ease;
}
.md-tabs__fakebar-thumb:hover {
  background: rgba(255, 255, 255, 0.85);
}

.md-tabs__fakebar.is-hidden {
  display: none;
}

/* Dark mode (slate) */
[data-md-color-scheme="slate"] .md-tabs__fakebar {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
[data-md-color-scheme="slate"] .md-tabs__fakebar-thumb {
  background: rgba(255, 255, 255, 0.45);
}
[data-md-color-scheme="slate"] .md-tabs__fakebar-thumb:hover {
  background: rgba(255, 255, 255, 0.65);
}