.marker-cluster-small {
  background-color: color-mix(
    in srgb,
    var(--env-ui-color-brand) 50%,
    transparent
  );
}
.marker-cluster-small div {
  background-color: var(--env-ui-color-brand);
}

.marker-cluster-medium {
  background-color: color-mix(
    in srgb,
    var(--env-ui-color-brand) 50%,
    transparent
  );
}
.marker-cluster-medium div {
  background-color: var(--env-ui-color-brand);
}

.marker-cluster-large {
  background-color: color-mix(
    in srgb,
    var(--env-ui-color-brand) 50%,
    transparent
  );
}
.marker-cluster-large div {
  background-color: var(--env-ui-color-brand);
}

/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
  background-color: var(--env-ui-color-brand-50);
}
.leaflet-oldie .marker-cluster-small div {
  background-color: var(--env-ui-color-brand);
}

.leaflet-oldie .marker-cluster-medium {
  background-color: var(--env-ui-color-brand-50);
}
.leaflet-oldie .marker-cluster-medium div {
  background-color: var(--env-ui-color-brand);
}

.leaflet-oldie .marker-cluster-large {
  background-color: var(--env-ui-color-brand-50);
}
.leaflet-oldie .marker-cluster-large div {
  background-color: var(--env-ui-color-brand);
}

.marker-cluster {
  background-clip: padding-box;
  border-radius: 20px;
}
.marker-cluster div {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;

  text-align: center;
  border-radius: 15px;
  font: var(--env-font-size-large) var(--env-font-family);
  font-weight: 500;
  color: var(--env-ui-color-brand-contrast);
}
.marker-cluster span {
  line-height: 30px;
}