.preview {
  background-color: rgb(var(--background--neutral-base-default--light));
  border: 1px solid rgb(var(--border--neutral-low-default--light));
  box-shadow: var(--shadow--medium-soft--light);

  &[data-entering] {
    animation: previewSlide 200ms;
  }

  &[data-exiting] {
    animation: previewSlide 200ms reverse ease-in;
  }

  @keyframes previewSlide {
    from {
      opacity: var(--blend--full--light);
    }

    to {
      opacity: var(--blend--solid--light);
    }
  }
}

.preview__image {
  cursor: zoom-out;
  max-height: inherit;
}

.preview__thumbnail {
  cursor: zoom-in;
  max-width: unset;
}