.filepond--image-preview {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex; /* this aligns the graphic vertically if the panel is higher than the image */
  align-items: center;
  height: 100%;
  width: 100%;
  pointer-events: none;
  background: #222;

  /* will be animated */
  will-change: transform, opacity;
}

.filepond--image-clip {
  position: relative;
  overflow: hidden;
  margin: 0 auto;

  /* transparency indicator (currently only supports grid or basic color) */
  &[data-transparency-indicator="grid"] {
    & img,
    & canvas {
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' fill='%23eee'%3E%3Cpath d='M0 0 H50 V50 H0'/%3E%3Cpath d='M50 50 H100 V100 H50'/%3E%3C/svg%3E");
      background-size: 1.25em 1.25em;
    }
  }
}

.filepond--image-bitmap,
.filepond--image-vector {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
