/* Shared map scale bar (public/scripts/scale-bar.js): bottom-left, black and white segments, labels in metres. */
.scale-bar {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 2px 4px 0;
  border-radius: 4px;
  background: rgba(251, 247, 238, .82);
  pointer-events: none;
  line-height: 0;
}

.scale-bar svg {
  display: block;
  overflow: visible;
}

.scale-bar text {
  font: 600 10px/1 "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  fill: #1d1a17;
}

.scale-bar-dark {
  fill: #1d1a17;
}

.scale-bar-light {
  fill: #ffffff;
}

.scale-bar-frame {
  fill: none;
  stroke: #1d1a17;
  stroke-width: 1;
}