/* horizontal-scrollbar.css */

[data-hscroll-root] {
  position: relative;
  overflow: hidden;

  --hscroll-height: 3px;
  --hscroll-track: #eceff3;
  --hscroll-thumb: #9aa7b8;
  --hscroll-thumb-hover: #7e8da1;
  --hscroll-radius: 999px;
}

[data-hscroll-viewport] {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;

  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;

  padding-bottom: 14px;

  scrollbar-width: none;
  -ms-overflow-style: none;

  cursor: grab;
}
[data-hscroll-viewport]::-webkit-scrollbar {
  display: none;
}
[data-hscroll-viewport].is-dragging-viewport {
  cursor: grabbing;
  user-select: none;
}

.hscroll-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: var(--hscroll-height);
  background: var(--hscroll-track);
  border-radius: var(--hscroll-radius);

  user-select: none;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

[data-hscroll-root]:hover .hscroll-bar {
  opacity: 1;
}

.hscroll-thumb {
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  min-width: 24px;

  background: var(--hscroll-thumb);
  border-radius: var(--hscroll-radius);
  cursor: grab;

  transition: background-color 0.15s ease;
}
.hscroll-thumb:hover {
  background: var(--hscroll-thumb-hover);
}
.hscroll-thumb.is-dragging {
  cursor: grabbing;
}