.community-fog {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.community-fog[hidden] {
  display: none;
}

.fog-hidden {
  visibility: hidden !important;
}

.map-layers .fog-toggle {
  margin: 8px 0 12px;
  padding: 10px;
  border: 1px solid #2b5554;
  border-radius: 9px;
  background: #0d292b;
}

.fog-toggle .fog-icon {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #193f3e;
  color: #5be0ca;
}

.fog-toggle > span:last-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.map-layers .fog-toggle small {
  margin: 0;
  color: #6f918c;
  font-size: 8px;
}

.fog-toggle:has(input:checked) {
  border-color: #32a996;
  background: #123632;
}

.fog-toggle:has(input:not(:checked)) .fog-icon {
  background: #34221c;
  color: #ee9874;
}