.gui-preview-image {
  @apply relative flex overflow-hidden w-full h-full pb-100%;

  svg {
    @apply w-full h-full;
  }
}

.gui-preview-image-fallback {
  @apply absolute;

  padding: 10%;
}

.gui-preview-image-img {
  @apply bg-center pb-100% transition-opacity duration-300 opacity-0;

  background-size: contain;
  background-repeat: no-repeat;
}

.gui-preview-image-succeeded .gui-preview-image-img {
  @apply opacity-100;
}

.gui-preview-image-show-loader {
  &.gui-preview-image-succeeded {
    @apply bg-neutral-20;

    path {
      fill: white;
    }
  }

  .gui-preview-image-img,
  .gui-preview-image-fallback {
    @apply opacity-50;
  }
}