vault-frontend/src/components/node/NodeImageBlock/styles.module.scss

@import "src/styles/variables";

.wrap {
  padding-bottom: $gap * 2;

  &:global(.is_animated) {
    .image_container {
      transition: height 0.5s;
    }

    .image_wrap {
      transition: opacity 0.5s;
    }
  }
}

.image_container {
  width: 100%;
  border-radius: $panel_radius 0 0 $panel_radius;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  user-select: none;

  .image {
    max-height: calc(100vh - 150px);
    max-width: 100%;
    opacity: 1;
    border-radius: $radius;

    @include outer_shadow();
  }
}

.image_wrap {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  &:global(.is_active) {
    opacity: 1;
  }
}

.placeholder {
  width: 100%;
  height: calc(100vh - 130px);
  border-radius: $radius;
  display: flex;
  align-items: center;
  justify-content: center;
}