$namespace: re-lazy-image;

.#{$namespace} {
  transition: opacity 500ms;

  &-loading {
    background: #f2f2f2;
    overflow: hidden;
  }

  &-loading.#{$namespace}-active {
    background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
    background-size: 400% 100%;
    animation: re-skeleton-loading 1.4s ease infinite;
  }

  @keyframes re-skeleton-loading {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
}