.skeleton {
  background: var(--skeleton-background, #f0f3f7) no-repeat;
  border-radius: var(--skeleton-border-radius, 12px);
  width: var(--skeleton-width, 100%);
  height: var(--skeleton-height, 20px);
  display: inline-block;
  margin-bottom: var(--skeleton-margin-bottom, 0px);
	margin-top: var(--skeleton-margin-top, 0px);
	margin-right: var(--skeleton-margin-right, 0px);
	margin-left: var(--skeleton-margin-left, 0px);
  box-sizing: border-box;
  outline: none;
  overflow: hidden;
  position: relative;
  -webkit-will-change: transform;
  -moz-will-change: transform;
  will-change: transform;

  &:after,
  &:before {
    box-sizing: border-box;
  }

  &.circle {
    width: var(--skeleton-width, 40px);
    height: var(--skeleton-height, 40px);
    margin-bottom: var(--skeleton-margin-bottom, 0px);
    border-radius: var(--skeleton-border-radius, 50%);
  }

  &.rect {
    border-radius: var(--skeleton-border-radius, 0px);
  }

  &.progress,
  &.progress-dark {
    -webkit-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    -moz-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    -ms-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    background-size: 200px 100%;
  }

  &.progress {
    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));
  }

  &.progress-dark {
    background-image: -webkit-linear-gradient(90deg, transparent, hsla(0, 0%, 0%, 0.2), transparent);
    background-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
    background-image: -ms-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
  }

  &.pulse {
    -webkit-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    -moz-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    -ms-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: 0.5s;
  }

  @media (prefers-reduced-motion: reduce) {
    &.pulse,
    &.progress-dark,
    &.progress {
      animation: none;
    }

    &.progress,
    &.progress-dark {
      background-image: none;
    }
  }
}

@-webkit-keyframes progress {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}
@-moz-keyframes progress {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}
@-ms-keyframes progress {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}
@keyframes progress {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

@-webkit-keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}