.map {
  width: 100%; 
  height: 500px;

  &.small {
    height: 200px;
  }

  .leaflet-control-attribution, .leaflet-control-attribution > * {
    font-size: 0.8rem;

    > a:hover{
      color: #000;
    }
  }
}

.map-banner {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.8);
  color: var(--color-text);
  padding: var(--space-xs) var(--space-s);
  text-align: center;
  z-index: 450;               /* higher than Leaflet’s default (400) */
  pointer-events: auto;       /* allow clicks on links/buttons */
}

.custom-map-marker {
  .map-marker-icon-fg {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 25px;
  }
  &.large {
    .map-marker-icon-fg {
      top: 12px;
      left: 13px;
      width: 53px;
    }
  }
}

/* Override leaflet styling */

.leaflet-control-layers-toggle {
	background-image: image-url("images/map/layers.png");
}

.leaflet-retina .leaflet-control-layers-toggle {
	background-image: image-url("images/map/layers-2x.png");
}

.leaflet-popup-content {
  a {
    color: var(--color-primary-minor);
    &:hover{
      color: var(--color-primary);
    }
  }
}

/* Marker cluster styling */

.marker-cluster {
  background-color: var(--color-primary-minor);
	background-clip: padding-box;
	border-radius: 20px;
  outline: 2px solid #000;
}

.marker-cluster div {
	width: 30px;
	height: 30px;
	margin-left: 5px;
	margin-top: 5px;

	text-align: center;
	border-radius: 15px;
	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.marker-cluster span {
	line-height: 30px;
}