.c-map {
    position: relative;
    max-width: fit-content;

    --map-bounding-box-north: 53.5498339;
    --map-bounding-box-east: 7.217292;
    --map-bounding-box-south: 49.5;
    --map-bounding-box-west: 2.55;
}

.c-map__background {

}

.c-map__marker {
  position: absolute;
  transform: translate(-50%, -50%);

  fill: currentColor;
  transition: color;
  transition-duration: .25s;

  &:hover {
    cursor: pointer;
  };

  path {
    pointer-events: none;
  }

  // TODO function to calculate left percentage from latitudes and bounding box
  top: calc(
            calc(
            calc(var(--latitude) - var(--map-bounding-box-north)) /
            calc(
            var(--map-bounding-box-south) -
            var(--map-bounding-box-north)
            )
            ) * 100%
    );
    left: calc(
            calc(
            calc(var(--longitude) - var(--map-bounding-box-west)) /
            calc(
            var(--map-bounding-box-east) - var(--map-bounding-box-west)
            )
            ) * 100%
    );

  &.active {
    color: palette(primary, 500);
  }

  &.selected {
    color: palette(primary, 500);
  }
}