/*
 * bearing-tool.css — the range and bearing tool (js/bearing-tool.js, js/bearing-overlay.js).
 *
 * The button (blue while the tool is on), the crosshair pointer, the drawing canvas and the
 * labels ("distance · bearing", running totals). Button and labels look as the main web map's
 * measure tool (web/css/measure-tool.css).
 */

/* --- Button --- */

.bearing-btn .maplibregl-ctrl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #33434d; /* the SVG icon draws with currentColor */
}

.bearing-btn[aria-pressed="true"] {
  background: #2f6690;
}

.maplibregl-ctrl-group .bearing-btn[aria-pressed="true"]:hover {
  background: #2a5c81;
}

.bearing-btn[aria-pressed="true"] .maplibregl-ctrl-icon {
  color: #fff;
}

/* Pressed look while the tool is on (the shared rule in controls.css skips pressed buttons) */
.maplibregl-ctrl-group .bearing-btn[aria-pressed="true"]:active,
.maplibregl-ctrl-group .bearing-btn[aria-pressed="true"].pressed {
  background: #1f4863;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* --- Crosshair pointer while the tool is on (js sets html.bearing-tool); out-ranks the arrow
   and the river hand of css/pilot.css, but not the four arrows while dragging --- */

html.bearing-tool .maplibregl-canvas-container.maplibregl-interactive:not(.dragging) {
  cursor: crosshair;
}

/* Over one of the path's points (js sets html.bearing-on-point): a click goes on from there */
html.bearing-tool.bearing-on-point .maplibregl-canvas-container.maplibregl-interactive:not(.dragging) {
  cursor: pointer;
}

/* Dragging a point (js sets html.bearing-dragging-point) */
html.bearing-tool.bearing-dragging-point .maplibregl-canvas-container.maplibregl-interactive {
  cursor: grabbing;
}

/* --- Drawing canvas and label layer: cover the map, never catch clicks --- */

.bearing-canvas,
.bearing-labels {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bearing-labels {
  overflow: hidden; /* labels near the edge must not create scrollbars */
}

/* --- Labels. `left`/`top` are set from JS; hidden until placed. The circled leg's
   "distance · bearing" and a finished path's total are red; the running totals white. --- */

.bearing-label {
  position: absolute;
  transform: translateY(-50%); /* vertically centred on the given point */
  display: none;
  font: 600 12px/16px system-ui, sans-serif;
  font-variant-numeric: tabular-nums; /* the label does not jitter while the numbers change */
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  background: #e8412c;
  padding: 1px 6px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.bearing-label.running {
  background: rgba(255, 255, 255, 0.9);
  color: #33434d;
}