/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  .jkl-loader {
    --jkl-loader-dot-size: var(--jkl-unit-10);
    --jkl-loader-spacing: var(--jkl-unit-20);
    display: flex;
  }
  .jkl-loader--inline {
    display: inline-flex;
  }
  .jkl-loader__dot {
    display: block;
    transform-origin: center;
    background-color: currentColor;
    height: var(--jkl-loader-dot-size);
    width: var(--jkl-loader-dot-size);
    animation: 2500ms linear infinite;
  }
  .jkl-loader__dot--left {
    animation-name: jkl-loader-left-spin-umqhqdg;
    margin-right: calc(var(--jkl-loader-spacing) * 0.9);
  }
  .jkl-loader__dot--middle {
    animation-name: jkl-loader-middle-spin-umqhqdh;
    margin-right: var(--jkl-loader-spacing);
  }
  .jkl-loader__dot--right {
    animation-name: jkl-loader-right-spin-umqhqdz;
  }
  @media screen and (forced-colors: active) {
    .jkl-loader__dot {
      background-color: CanvasText;
    }
  }
  @keyframes jkl-loader-left-spin-umqhqdg {
    0% {
      transform: rotate(0) scale(0);
    }
    30% {
      transform: rotate(90deg) scale(1);
    }
    70% {
      transform: rotate(180deg) scale(0);
    }
    100% {
      transform: rotate(180deg) scale(0);
    }
  }
  @keyframes jkl-loader-middle-spin-umqhqdh {
    0% {
      transform: rotate(20deg) scale(0);
    }
    10% {
      transform: rotate(20deg) scale(0);
    }
    40% {
      transform: rotate(110deg) scale(1.4);
    }
    85% {
      transform: rotate(200deg) scale(0);
    }
    100% {
      transform: rotate(200deg) scale(0);
    }
  }
  @keyframes jkl-loader-right-spin-umqhqdz {
    0% {
      transform: rotate(40deg) scale(0);
    }
    20% {
      transform: rotate(40deg) scale(0);
    }
    50% {
      transform: rotate(130deg) scale(1);
    }
    100% {
      transform: rotate(220deg) scale(0);
    }
  }
}