/// Loader.
///
/// @group loaders
///
/// @example scss - usage
///
///   @include k-Loader;
///
/// @example html
///
///   <div class="k-Loader">
///     <div class="k-Loader__circle" />
///     <div class="k-Loader__circle" />
///     <div class="k-Loader__circle" />
///   </div>

@mixin k-Loader {
  $circle-size: k-px-to-rem(5px);
  $spacing: k-px-to-rem(2px);
  $easing: cubic-bezier(.2, .68, .18, 1.08);
  $duration: 1.75s;

  .k-Loader {
    display: flex;
    height: $circle-size;
    line-height: 1;
  }

  .k-Loader__circle {
    display: inline-block;
    margin-left: $spacing;
    width: $circle-size;
    height: $circle-size;
    border-radius: $circle-size;

    animation: k-Loader-animation-scale $duration 0s infinite $easing;
    animation-fill-mode: both;

    &:nth-child(1) {
      animation-delay: -($duration / 3);
      margin-left: 0;
    }

    &:nth-child(2) {
      animation-delay: -($duration / 3 / 2);
    }

    &:nth-child(3) {
      animation-delay: 0s;
    }
  }

  @keyframes k-Loader-animation-scale {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    45% {
      transform: scale(.1);
      opacity: .7;
    }

    80% {
      transform: scale(1);
      opacity: 1;
    }
  }
}