@mixin vf-u-vertical-spacing($start: -3, $end: 3) {
  // FIXME
  // this utility works only on elements that don't have borders or backgrounds
  // by adding an ::after pseudo-element it extends the inside of the element
  // rather than modyfing the space after it
  %u-vertical-spacer {
    content: '';
    display: block;
    height: 1px; // needed so any margin applied is taken as part of the flow
    position: relative;
  }

  @for $i from $start through $end {
    @if $i != 0 {
      .u-sv#{$i} {
        &::after {
          @extend %u-vertical-spacer;

          margin-top: calc($sp-unit * $i - 1px); // subtracting the element height, which is set to 1px above.
        }
      }
    }
  }
}