/* src/loader/src/Loader.css */
.o-ui-loader {
  --animation-duration: 2s;
  opacity: 0;
  transition: opacity var(--o-ui-easing-duration-2) var(--o-ui-easing-productive);
  width: 2rem;
  height: 2rem;
  position: relative;
}
.o-ui-loader-dot-1,
.o-ui-loader-dot-2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: var(--hop-primary-icon);
  border-radius: var(--hop-shape-circle);
  animation: o-ui-loader-bounce var(--animation-duration) infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .o-ui-loader-dot-1,
  .o-ui-loader-dot-2 {
    animation-iteration-count: 1;
  }
}
.o-ui-loader-dot-2 {
  top: auto;
  bottom: 0;
  animation-delay: calc(-1 * (var(--animation-duration) / 2));
}
.o-ui-loader-show {
  opacity: 1;
  animation: o-ui-loader-rotate var(--animation-duration) infinite linear;
}
@media (prefers-reduced-motion: reduce) {
  .o-ui-loader-show,
  .o-ui-loader .o-ui-loader-dot-1,
  .o-ui-loader .o-ui-loader-dot-2 {
    animation-iteration-count: 1;
  }
  .o-ui-loader .o-ui-loader-dot-1 {
    transform: scale(1);
  }
  .o-ui-loader .o-ui-loader-dot-2 {
    transform: scale(.3);
  }
}
@keyframes o-ui-loader-bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes o-ui-loader-rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* src/loader/src/index.css */