/*
 * Copyright (c) 2024 Biovisuals Private Limited
 * All rights reserved.
 *
 * This software is the confidential and proprietary information of Biovisuals Private Limited.
 * You shall not disclose such Confidential Information and shall use it only
 * in accordance with the terms of the license agreement you entered into with Biovisuals Private Limited.
 */

/* Horizontal canvas navigation bar (Packet C correction).
   Lives in the canvas overlay layer: row 2 / column 3 of the shell grid, the
   same cell as `.svg-canvas-container`, so it never affects Fabric geometry.
   Right-side clearance uses --bv-right-dock (slide-panel overlay width) plus
   the support-button clearance so the bar is never hidden beneath either. This
   clearance is purely visual and does not resize Fabric. */
.bv-panbar {
  position: relative;
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  justify-self: stretch;
  /* Sits above the bottom edge, clear of the floating zoom toolbar row.
     Packet C polish: lowered ~12px (66px -> 54px) in step with the zoom toolbar.
     The bottom offset is DERIVED from the shared scale in global.css
     (inset + zoom-bar height + clearance), so the guaranteed gap above the
     toolbar is preserved at every viewport height instead of being a literal. */
  margin: 0 calc(16px + var(--bv-right-dock, 0px) + var(--bv-support-btn-clearance, 86px)) var(--bv-panbar-bottom-offset, 54px) 16px;
  height: 10px;
  z-index: 999; /* below the floating zoom toolbar (1000) so it stays secondary */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.bv-panbar--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bv-panbar__track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(60, 60, 60, 0.12);
  cursor: pointer;
}

.bv-panbar__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 44px; /* pointer/touch target floor, mirrored in canvasPanBar.js */
  border-radius: 999px;
  background: rgba(60, 60, 60, 0.42);
  cursor: grab;
  touch-action: none; /* pointer drag owns the gesture */
  transition: background-color 0.15s ease;
}

.bv-panbar__thumb:hover {
  background: rgba(60, 60, 60, 0.58);
}

.bv-panbar__thumb:focus-visible {
  outline: 2px solid #ff6f00;
  outline-offset: 2px;
}

.bv-panbar__thumb--dragging {
  background: rgba(60, 60, 60, 0.72);
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  .bv-panbar,
  .bv-panbar__thumb { transition: none; }
}