@mixin border-draw-infinite ($name, $color, $border-size, $animation-duration: 1s, $border-radius: 0px) {
  position:                                                 relative;
  &::before,
  &::after {
    // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
    border: $border-size solid transparent;
    width: 0;
    height: 0;
    content: ' ';
    position: absolute;
    border-radius: $border-radius;
  }


  &::before {
    border-top-color: $color; // Make borders visible
    border-right-color: $color;
    width: 100%;
    height: 100%;
    animation-name: border-draw-infinite-before-#{$name};
    animation-duration: $animation-duration;
    animation-iteration-count:infinite;
    margin-top: $border-size * -1;
    margin-right: $border-size * -1;
  }

  &::after {
    border-bottom-color: $color; // Make borders visible
    border-left-color: $color;
    width: 100%;
    height: 100%;
    animation-name: border-draw-infinite-after-#{$name};
    animation-duration: $animation-duration;
    animation-iteration-count: infinite;
    margin-bottom: $border-size * -1;
    margin-left: $border-size * -1;
    margin-right: $border-size;
  }
  @at-root {
    @include keyframes(border-draw-infinite-before-#{$name}) {
      0% {
        width: 0%;
        height: 0%;
        top: 0;
        left: 0;
        right: initial;
        opacity: 0;
      }
      12.5% {
        width: 100%;
        height: 0%;
        top: 0;
        left: 0;
        right: initial;
        opacity: 1;
      }
      25% {
        width: 100%;
        height: 100%;
        top: 0;
        left: initial;
        right: 0;
        opacity: 1;
      }
      50% {
        width: 100%;
        height: 100%;
        top: 0;
        left: initial;
        right: 0;
        opacity: 1;
      }
      62.5% {
        width: 0%;
        height: 100%;
        top: initial;
        bottom: 0;
        left: initial;
        right: 0;
        opacity: 1;
      }
      75% {
        width: 0%;
        height: 0%;
        top: initial;
        bottom: 0;
        right: 0;
        left: initial;
        opacity: 0;
      }
      100% {
        width: 0%;
        height: 0%;
        top: initial;
        bottom: 0;
        right: 0;
        left: initial;
        opacity: 0;
      }
    }
    @include keyframes(border-draw-infinite-after-#{$name}) {
      0% {
        width: 0%;
        height: 100%;
        bottom: initial;
        right: initial;
        left: 0;
        top: 0;
        opacity: 1;
      }
      25% {
        width: 0%;
        height: 0%;
        bottom: 0;
        right: 0;
        left: initial;
        top: initial;
        opacity: 0;
      }
      37.5% {
        width: 100%;
        height: 0%;
        bottom: 0;
        right: 0;
        left: initial;
        top: initial;
        opacity: 1;
      }
      50% {
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        left: initial;
        top: initial;
        opacity: 1;
      }
      62.5% {
        width: 100%;
        height: 100%;
        bottom: 0;
        right: initial;
        top: initial;
        left: 0;
        opacity: 1;
      }
      75% {
        width: 0%;
        height: 100%;
        bottom: initial;
        top: 0;
        right: initial;
        left: 0;
        opacity: 1;
        margin-left: ($border-size) * -1;
      }
      100% {
        width: 0%;
        height: 0%;
        bottom: initial;
        right: initial;
        left: 0;
        top: 0;
        opacity: 0;
      }
    }
  }
}