@use 'sass:math';

@mixin loading($size, $border-size) {
  display: block;
  width: $size;
  height: $size;
  border: $border-size solid transparent;
  border-top: $border-size solid $loading-color;
  border-bottom: $border-size solid $loading-color;
  border-radius: $loading-border-radius;
  animation: $loading-animation-name $loading-animation-duration linear infinite;
}

// Loading of whole app
.lf-loading:empty {
  @include loading($loading-app-size, $loading-app-border-size);
  // Center vertically and add a margin without causing the body to overflow
  display: inline-block;
  margin: $loading-app-margin calc(50% - #{math.div($loading-app-size, 2)});
}