/* ============================================================
   GEOINFOWORLD
   Cartographic Intelligence v1
   ============================================================ */

.giw-cartography-control {
  position: absolute;

  top: 14px;
  left: 165px;

  z-index: 72;

  display: flex;

  align-items: center;

  gap: 6px;
}


.giw-cartography-button {
  min-height: 34px;

  padding: 6px 10px;

  cursor: pointer;

  border:
    1px solid rgba(190,220,240,.16);

  border-radius: 9px;

  color: #b8cddd;

  background:
    rgba(5,16,28,.80);

  backdrop-filter:
    blur(14px);

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.18);

  transition:
    .15s ease;
}


.giw-cartography-button:hover {
  color: #ffffff;

  border-color:
    rgba(69,212,255,.34);

  background:
    rgba(14,45,65,.92);
}


.giw-cartography-button.is-active {
  color: #bdf1ff;

  border-color:
    rgba(69,212,255,.44);

  background:
    linear-gradient(
      135deg,
      rgba(69,212,255,.14),
      rgba(93,140,255,.08)
    );
}


/* ------------------------------------------------------------
   CARTOGRAPHIC STATUS
   ------------------------------------------------------------ */

.giw-cartography-status {
  position: absolute;

  right: 14px;
  bottom: 14px;

  z-index: 35;

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 6px 9px;

  border:
    1px solid
    rgba(190,220,240,.12);

  border-radius: 8px;

  color: #8299ac;

  background:
    rgba(5,16,28,.72);

  backdrop-filter:
    blur(12px);

  font-size: .62rem;

  pointer-events: none;
}


.giw-cartography-status strong {
  color: #a8ebff;

  font-weight: 620;
}


/* ------------------------------------------------------------
   SCALE-AWARE LAYER STATE
   ------------------------------------------------------------ */

.giw-layer.giw-scale-muted {
  opacity: .54;
}


.giw-layer.giw-scale-muted
.giw-layer-label {
  opacity: .68;
}


.giw-layer.giw-scale-muted::after {
  content: "out of scale";

  display: block;

  margin:
    0 7px 6px;

  color: #647d90;

  font-size: .58rem;

  font-style: italic;
}


/* ------------------------------------------------------------
   ACTIVE CARTOGRAPHIC ROLE
   ------------------------------------------------------------ */

.giw-layer[data-giw-cartography-role="background"] {
  border-left:
    2px solid rgba(96,165,250,.38) !important;
}

.giw-layer[data-giw-cartography-role="reference"] {
  border-left:
    2px solid rgba(148,163,184,.32) !important;
}

.giw-layer[data-giw-cartography-role="environment"] {
  border-left:
    2px solid rgba(74,222,128,.32) !important;
}

.giw-layer[data-giw-cartography-role="water"] {
  border-left:
    2px solid rgba(56,189,248,.38) !important;
}

.giw-layer[data-giw-cartography-role="infrastructure"] {
  border-left:
    2px solid rgba(251,191,36,.34) !important;
}

.giw-layer[data-giw-cartography-role="population"] {
  border-left:
    2px solid rgba(244,114,182,.28) !important;
}

.giw-layer[data-giw-cartography-role="analysis"] {
  border-left:
    2px solid rgba(167,139,250,.38) !important;
}

.giw-layer[data-giw-cartography-role="labels"] {
  border-left:
    2px solid rgba(255,255,255,.30) !important;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 800px) {

  .giw-cartography-control {
    left: 14px;
    top: 58px;
  }

}