@keyframes spinner-circle {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@mixin spinner-circle-base() {
  border-radius: 100%;
  border-style: solid;
  display: inline-block;
}

@mixin spinner-circle-dimensions($size, $border-width) {
  border-width: $border-width;
  height: $size;
  width: $size;

  &::after {
    border-width: $border-width;
    height: $size;
    left: -$border-width;
    top: -$border-width;
    width: $size;
  }
}

@mixin spinner-circle($bg-color, $color) {
  @include spinner-circle-base();

  animation-duration: 0.75s;
  animation-name: spinner-circle;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border-color: $bg-color;
  position: relative;

  &::after {
    @include spinner-circle-base();

    border-color: $color transparent transparent transparent;
    content: "";
    position: absolute;
  }
}