HabitatMap/AirCasting

.marker {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  left: -6px;
  top: -6px;
  color: transparent;
  cursor: pointer;

  &.trace {
    background-color: $blue;
    width: 16px;
    height: 16px;
    left: -8px;
    top: -8px;
  }

  &.default {
    background-color: $grey;
  }

  &.highest {
    @extend .level4-bg;
  }

  &.high {
    @extend .level3-bg;
  }

  &.mid {
    @extend .level2-bg;
  }

  &.low {
    @extend .level1-bg;
  }
}

.data-marker {
  background: white;
  border-radius: 15px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 12px;
  padding: 0 5px 0 18px;
  position: absolute;
  line-height: 18px;
  left: -11px;
  top: -10px;

  &.highest {
    border: 1px solid rgba(var(--level4-colour), 1);
  }

  &.high {
    border: 1px solid rgba(var(--level3-colour), 1);
  }

  &.mid {
    border: 1px solid rgba(var(--level2-colour), 1);
  }

  &.low {
    border: 1px solid rgba(var(--level1-colour), 1);
  }

  &.default {
    border: 1px solid $grey;
  }
}

.data-marker::before {
  border-radius: 50%;
  content: "";
  height: 12px;
  left: 3.6px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
}

.data-marker.highest::before {
  @extend .level4-bg;
}

.data-marker.high::before {
  @extend .level3-bg;
}

.data-marker.mid::before {
  @extend .level2-bg;
}

.data-marker.low::before {
  @extend .level1-bg;
}

.data-marker.default::before {
  background: $grey;
}

.data-marker::after {
  background: transparent;
  border-radius: 50%;
  content: "";
  width: 45px;
  height: 45px;
  position: absolute;
  left: -13px;
  top: -14px;
  z-index: -1;
}

@mixin halo($color) {
  background-image: radial-gradient(
    circle at 50%,
    rgba($color, 0.75) 10px,
    rgba($color, 0.5) 45%,
    rgba(255, 255, 255, 0) 70%
  );
}

.data-marker.default::after {
  @include halo($grey);
}

.data-marker.highest::after,
.marker.highest::after {
  @include halo(var(--level4-colour));
}

.data-marker.high::after,
.marker.high::after {
  @include halo(var(--level3-colour));
}

.data-marker.mid::after,
.marker.mid::after {
  @include halo(var(--level2-colour));
}

.data-marker.low::after,
.marker.low::after {
  @include halo(var(--level1-colour));
}

.marker-container {
  position: absolute;
  height: 0px;
  width: 100px;
}

img[src*="marker-transparent"] {
  animation: pulse 0.7s infinite alternate;
  -webkit-animation: pulse 0.7s infinite alternate;
  transform-origin: center;
  -webkit-transform-origin: center;
}

/* Animations */
@keyframes pulse {
  to {
    transform: scale(4);
    -webkit-transform: scale(4);
  }
}

@-webkit-keyframes pulse {
  to {
    transform: scale(4);
    -webkit-transform: scale(4);
  }
}