/*
 *  Loadable Image
 *    Image that gets loaded in the background
 *
 *  Dependencies:
 *
 *  Version:
 *    1.0.0 - 2018/07/11
 */
@include t-keyframes(o-loadable-image--load-flash) {
  from {
    background: transparent;
  }

  50% {
    background: #DDD;
  }

  to {
    background: transparent;
  }
}

.o-loadable-image {

  &__image-container {
    opacity: 1;
    transition: all 1s $s-animation--ease-out;
    transition-delay: 0.5s;
  }

  &.is-loading {
    position: relative;
    
    @include t-animation-name(o-loadable-image--load-flash);
    @include t-animation-timing-function(linear);
    @include t-animation-duration(2s);
    @include t-animation-iteration-count(infinite);

    .o-loadable-image__image-container {
      opacity: 0;
    }
  }
}