/* From https://css-loaders.com/wobbling/ */

body > .progress-bar-container .progress-bar-indicator {
  height: 97.0818px;
  width: 60px;
  color: var(--text-accent);
  background:
    repeating-linear-gradient(
      calc(30deg + var(--flexcyon-editor-bg-rotation)),
      currentColor,
      currentColor 1px,
      transparent 1px,
      transparent var(--flexcyon-editor-bg-width)
    ),
    repeating-linear-gradient(
      calc(150deg + var(--flexcyon-editor-bg-rotation)),
      currentColor,
      currentColor 1px,
      transparent 1px,
      transparent var(--flexcyon-editor-bg-width)
    );
  animation: buffer 0.65s infinite;
  transform-origin: 50% 0px;

  > * {
    display: none;
  }
}

@keyframes buffer {
  0% {
    background-position:
      0%,
      0 0;
  }
  50% {
    background-position:
      25%,
      12.5px 0;
  }
  100% {
    background-position:
      50%,
      12.5px 12.5px;
  }
}

// .spinner {
//   margin: 100px auto;
//   width: 50px;
//   height: 40px;
//   text-align: center;
//   font-size: 10px;
// }

// .spinner > div {
//   background-color: #333;
//   height: 100%;
//   width: 6px;
//   display: inline-block;

//   -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
//   animation: sk-stretchdelay 1.2s infinite ease-in-out;
// }

// .spinner .rect2 {
//   -webkit-animation-delay: -1.1s;
//   animation-delay: -1.1s;
// }

// .spinner .rect3 {
//   -webkit-animation-delay: -1.0s;
//   animation-delay: -1.0s;
// }

// .spinner .rect4 {
//   -webkit-animation-delay: -0.9s;
//   animation-delay: -0.9s;
// }

// .spinner .rect5 {
//   -webkit-animation-delay: -0.8s;
//   animation-delay: -0.8s;
// }

// @-webkit-keyframes sk-stretchdelay {
//   0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
//   20% { -webkit-transform: scaleY(1.0) }
// }

// @keyframes sk-stretchdelay {
//   0%, 40%, 100% {
//     transform: scaleY(0.4);
//     -webkit-transform: scaleY(0.4);
//   }  20% {
//     transform: scaleY(1.0);
//     -webkit-transform: scaleY(1.0);
//   }
// }
