lazy-asset.scss

.lazy-asset {
  position: relative;

  // For <picture> images
  picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  // For <img> images
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;

    opacity: 0;

    // IE fallback
    background-position: center center;
    background-size: cover;
  }

  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% 50%;

    opacity: 0;
  }

  .lazy-asset-wrapper {
    position: relative;
    width: 100%;
    height: 100%;

    // placeholder
    background-size: cover;
    background-repeat: no-repeat;
  }

  .lazy-asset-wrapper-overflow { // we want picture / video to be overflow: hidden, but not necessarily entire lazy-asset-wrapper (extra content!). Therefore additional container added, overflow: hidden doesn't seem to work on <video> tag
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  &.lazy-asset-mode-aspect-ratio { // for aspect ratio wrapper has padding-bottom, so we don't want to set height
    .lazy-asset-wrapper {
      height: auto;
    }
  }

  // Default background colors
  &.lazy-asset-image {
    .lazy-asset-wrapper {
      background-color: #f7f7f7;
    }

    video {
      display: none;
    }
  }

  &.lazy-asset-video {
    .lazy-asset-wrapper {
      background-color: black;
    }

    img, picture {
      display: none;
    }

  }

  // Animations
  &[data-anim=fade] {
    img, video {
      transition: opacity 1s;
    }
  }

  &.loaded {
    .lazy-asset-wrapper img, .lazy-asset-wrapper video {
      opacity: 1;
    }
  }

  .lazy-asset-debugger {
    $_BACKGROUND_OPACITY: 0.5;
    color: white;
    font-size: 12px;
    z-index: 1;
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: 'Consolas', monospace;
    & > div {
      padding: 2px 4px;
    }
    &__img-sizes {
      background: rgba(#000888, $_BACKGROUND_OPACITY);
      .lazy-debugger__img-crop,
      .lazy-debugger__img-mode {
        display: none;
      }
      &:hover {
        .lazy-debugger__img-crop,
        .lazy-debugger__img-mode {
          display: block;
        }
      }
    }
    &__img-container {
      background: rgba(#008888, $_BACKGROUND_OPACITY);
    }
    &__img-asset {
      background: rgba(#080800, $_BACKGROUND_OPACITY);
    }
    &__img-efficiency {
      background: rgba(#008800, $_BACKGROUND_OPACITY);

      &--warn {
        background: rgba(#888800, $_BACKGROUND_OPACITY);
      }
      &--error {
        background: rgba(#880000, $_BACKGROUND_OPACITY);
      }
    }
  }

}