.c-marker {
  $self: #{&};

  $color: $color-secondary;
  $size: 10px;

  @keyframes ripple-marker {
    0% {
      box-shadow: 0 0 0 0 rgba($color, 0.3)
    }

    100% {
      box-shadow: 0 0 0 20px rgba($color, 0)
    }
  }

  @at-root {
    #{$self} {
      display: inline-block;
      background-color: lighten($color, 10%);
      width: $size;
      height: $size;
      border-radius: $size / 2;

      @include make-modifier('ripple') {
        animation: ripple-marker 1s ease-out infinite;

      }
    }

  }

}