@keyframes skeletonShine {
  to {
    background-position: 500px 0;
  }
}

.wco-skeleton:empty,
.wco-skeleton *:empty {
  background: #f6f7f8;
  background-position: -500px 0;
  animation: skeletonShine 1s linear 0s infinite normal forwards;
  background-image: linear-gradient(
    135deg,
    #f6f7f8 0%,
    #edeef1 20%,
    #f6f7f8 40%,
    #f6f7f8 100%
  );
  background-repeat: no-repeat;
  background-size: 1000px 100%;
}

@keyframes wco-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.wco-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid var(--wco-color-primary-500);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: wco-spin 1s linear infinite;
}