$loader-animation-duration: 0.6s;
$loader-quarter-duration: $loader-animation-duration * 0.2;

.#{$n}-loader {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: $spacer * 0.25;
  height: $spacer;
  padding: $spacer * 0.125 $spacer * 0.25;
  animation: #{$app-name}-fadeIn $loader-animation-duration * 0.5 linear;
}

.#{$n}-loader__part {
  display: inline-block;
  width: $spacer * 0.3333;
  height: 100%;
  transform: scaleY(0.45);
  animation-name: #{$app-name}-loader;
  animation-duration: $loader-animation-duration;
  animation-timing-function: ease;
  animation-delay: $loader-quarter-duration;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
  border-radius: 50%;
  background-color: currentcolor;

  &.#{$n}-one {
    animation-delay: $loader-quarter-duration;
  }

  &.#{$n}-two {
    animation-delay: $loader-quarter-duration * 2;
  }

  &.#{$n}-three {
    animation-delay: $loader-quarter-duration * 3;
  }

  &.#{$n}-four {
    animation-delay: $loader-quarter-duration * 4;
  }
}