/*
 * controls.css — the buttons in the top-right corner.
 *
 * Covers the 2D/3D switch (js/mode-switch.js), the pressed look shared by all buttons
 * (js/press-feedback.js adds the `.pressed` class) and a cursor fix for MapLibre's compass.
 * The ruler button has its own styles in measure-tool.css.
 */

/* --- 2D / 3D switch: two buttons side by side, the active one filled blue --- */

.mode-switch {
  display: flex;
}

.mode-switch button {
  width: auto;
  height: 32px;
  padding: 0 12px;
  font: 600 13px/32px system-ui, sans-serif;
  color: #33434d;
}

.mode-switch button + button {
  border-top: 0;
  border-left: 1px solid #ddd;
}

/* The active view's button: filled, and no pointer (clicking it does nothing) */
.mode-switch button[aria-pressed="true"] {
  background: #2f6690;
  color: #fff;
  cursor: default;
}

.mode-switch button[aria-pressed="false"]:hover {
  background: #eef3f6;
}

/* --- Pressed look for all map buttons (+, -, compass, full screen, 2D/3D) ---
   Darker and sunken, with the icon shrinking a little. `:active` covers a held button;
   `.pressed` is added from JS so that even a very quick tap shows it for 150 ms. */

.maplibregl-ctrl-group button:not(:disabled):not([aria-pressed="true"]):active,
.maplibregl-ctrl-group button.pressed {
  background: #c9d9e4;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35);
}

.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  transition: scale 80ms;
}

.maplibregl-ctrl-group button:not(:disabled):active .maplibregl-ctrl-icon,
.maplibregl-ctrl-group button.pressed .maplibregl-ctrl-icon {
  /* The CSS `scale` property, not `transform`: the compass turns its icon with an inline
     `transform`, which would override a transform set here. */
  scale: 0.82;
}

/* --- Compass: the same hand pointer as + and - ---
   MapLibre gives it a `grab` cursor because it can also be dragged to rotate/tilt the map. */

.maplibregl-ctrl-group button.maplibregl-ctrl-compass,
.maplibregl-ctrl-group button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
  cursor: pointer;
}