.pattern-halo {
  --pattern-halo-bg: var(--mahina-color-dark-green);
  --pattern-halo-stroke: var(--mahina-color-light-green);
  --pattern-halo-max-opacity: 0.15;
  position: relative;
  overflow: hidden;
  background: var(--pattern-halo-bg);
}

.pattern-halo > *:not(.pattern-halo__canvas) {
  z-index: 1;
}

.pattern-halo__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pattern-halo--dark {
  --pattern-halo-bg: var(--mahina-color-dark-green);
  --pattern-halo-stroke: var(--mahina-color-light-green);
  --pattern-halo-max-opacity: 0.15;
  color: var(--mahina-color-white);
}

.pattern-halo--light {
  --pattern-halo-bg: var(--mahina-color-light-green);
  --pattern-halo-stroke: var(--mahina-color-dark-green);
  --pattern-halo-max-opacity: 0.15;
  color: var(--mahina-color-dark-green);
}