@import '../config/import';

.crayons-scaffold {
  border-radius: var(--radius);
  background: var(--body-color);
  opacity: 0.025;
}

.crayons-scaffold-loading {
  border-radius: var(--radius);
  animation-duration: 1.25s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.1) 10%,
    rgba(0, 0, 0, 0.05) 25%,
    rgba(255, 255, 255, 0.1) 40%
  );
  box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.025);
  background-size: 800px 104px;
  position: relative;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
