/* ===================================== */
/* BUBBLE */
/* ===================================== */

#bubbleView {
  position: absolute;
  inset: 0;
}

.bubbleToolbar {

  display: flex;

  gap: 16px;

  align-items: center;

  padding: 8px 12px;

  border-bottom:
    1px solid #e5e7eb;

  background: white;
}

.bubbleToolbar label {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 13px;

  color: #374151;
}

.bubbleToolbar select {

  padding:
    4px 8px;

  border:
    1px solid #d1d5db;

  border-radius: 6px;

  background: white;
}

/* ===================================== */
/* BUBBLE PANEL */
/* ===================================== */

#bubbleView {

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;

    min-height:0;

    overflow:hidden;
}

#bubbleCanvas {

  flex: 1;

  min-height: 0;
}

/* ===== Zoom and history of the range (VIEW-BUBBLE-03) =====
   The map's own controls: Leaflet bars, + − top left and ← ★ → top
   right of the chart area. */

.bubbleBar {
  position: absolute;
  top: 56px;
  z-index: 5;
  user-select: none;
}

.bubbleZoomBar {
  left: 64px;
}

.bubbleHistoryBar {
  right: 12px;
}

.bubbleZoomBar a {
  font: bold 18px 'Lucida Console', Monaco, monospace;
}

/* as Leaflet does on touch screens (.leaflet-touch) */
@media (pointer: coarse) {

  .bubbleBar a {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
}