.image-load-tracker {
  @apply shadow-md w-full bg-white;
  overflow: hidden;
  opacity: 0;
  border-top: 2px solid #EFF2F7;
  border-bottom: 1px solid #EFF2F7;

  transition-delay: 500ms;
  transition: opacity 250ms linear;
}

.image-load-tracker--simple,
.image-load-tracker--preview {
  @apply flex items-center justify-between 
}

.image-load-tracker--simple {
  @apply bg-grey-light justify-center;
}

.image-load-tracker--detailed {
  @apply border-grey shadow-none justify-start;
  border-top: 2px solid #EFF2F7;
  border-bottom: none;
}

.image-load-tracker__loader {
  @apply mr-4;
}

.image-load-tracker--simple .image-load-tracker__loader {
  @apply mr-3;
}

.image-load-tracker__loader .loading__spinner {
  border-width: 2px;
  width: 25px;
  height: 25px;
}

.image-load-tracker--detailed .image-load-tracker__loader .loading__spinner,
.image-load-tracker--simple .image-load-tracker__loader .loading__spinner {
  width: 15px;
  height: 15px;
}

.image-load-tracker--simple .image-load-tracker__loader .loading__spinner {
  border-width: 1px;
  border-color: #787c83;
  border-right-color: #eff2f7;
}

.image-load-tracker__loader-info {
  @apply py-3 pl-4 flex items-center;
}

.image-load-tracker--simple .image-load-tracker__loader-info {
  @apply py-1 px-2;
}

.image-load-tracker__info-title,
.image-load-tracker__info-subtitle {
  @apply truncate;
  line-height: .75rem;
}

.image-load-tracker__info-title {
  @apply text-xs text-grey-darker capitalize;
}

.image-load-tracker--simple .image-load-tracker__info-title {
  @apply text-tn text-grey-dark;
}

.image-load-tracker--detailed .image-load-tracker__info-title {
  @apply font-semibold;
}

.image-load-tracker__info-subtitle {
  @apply text-tn text-grey;
}

.image-load-tracker__image {
  line-height: 0;
  width: 50px;
  height: 50px;
}

.image-load-tracker__image .image {
  @apply w-full h-full p-1 rounded-lg;
  object-fit: cover;
}

.image-load-tracker__images {
  @apply w-full;
  height: 110px;
  /**
   * TODO: This is a lame way of adding bottom padding
   * to the inner images.
   *
   * @see "snapping" in <Gallery> to find solution
   */
  border-bottom: 10px solid white;
  box-sizing: content-box;
}

.image-load-tracker__images--small {
  width: 105px;
  max-width: 105px;
  height: 35px;
}

/**
 * Transition
 */
.image-load-tracker-enter,
.image-load-tracker-enter-done {
  opacity: 1;
}

.image-load-tracker-exit,
.image-load-tracker-exit-done {
  opacity: 0;
}