/* ---- PM2.5 divIcon markers ---- (split from styles.css) */
.pm25-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* full-size (30px) defaults; .pm25-icon--small scales to 22px */
  --pm25-border: 1.5px;
  --pm25-font: 13px;
  --pm25-font-3: 10px;
}

.pm25-icon--small {
  --pm25-border: 1px;
  --pm25-font: 9px;
  --pm25-font-3: 7px;
}

.pm25-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* #bbbbbb = data-contract fallback for missing PM2.5 (mirrors aqhi_pm25_scale na.color); #000 = marker outline baked into the R-drawn icons. */
  background-color: var(--pm25-colour, #bbbbbb);
  color: var(--pm25-text-colour, var(--text-primary));
  border: var(--pm25-border, 1.5px) solid #000;
  box-sizing: border-box;
  background-clip: padding-box;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: var(--pm25-font);
  line-height: 1;
  user-select: none;
}

.pm25-marker--circle {
  width: 76%;
  height: 76%;
  border-radius: 50%;
}

.pm25-marker--square {
  width: 68%;
  height: 68%;
}

.pm25-marker--diamond {
  /* Diamond = 45°-rotated square on ::before so the value label stays level; diagonal ≈ 94.6% of the icon box. */
  width: 66.9%;
  height: 66.9%;
  background-color: transparent;
  border: none;
}

.pm25-marker--diamond::before {
  content: "";
  position: absolute;
  inset: 0;
  /* #bbbbbb / #000: data-contract fallbacks — see .pm25-marker above. */
  background-color: var(--pm25-colour, #bbbbbb);
  border: var(--pm25-border, 1.5px) solid #000;
  box-sizing: border-box;
  background-clip: padding-box;
  transform: rotate(45deg);
}

/* Paints the label above the rotated diamond background (::before) */
.pm25-marker__label {
  position: relative;
  z-index: 1;
}

/* Numeric labels need one extra pixel to reach visual centre; dashes are geometrically centred. */
.pm25-icon--purpleair:not(.obs_icons_flagged) .pm25-marker__label:not(.pm25-marker__label--dash),
.pm25-marker--square .pm25-marker__label:not(.pm25-marker__label--dash) {
  transform: translateY(1px);
}

.pm25-marker__label--dash {
  width: 0.55em;
  height: max(1px, 0.09em);
  background-color: var(--pm25-text-colour, var(--text-primary));
}

.pm25-marker--3digit {
  font-size: var(--pm25-font-3);
}