@use "../../../../styles/mixins.scss";

.previewWrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  
  @include mixins.respond-below(lg) {
    padding: 1.5rem;
    overflow-x: auto;
    min-width: 0;
    
    // Allow horizontal scroll on tablets when ticket is wider than viewport
    > * {
      flex-shrink: 0;
    }
  }
  
  @include mixins.respond-below(md) {
    padding: 1rem;
  }
  
  @include mixins.respond-below(sm) {
    padding: 0.5rem;
  }
}

.loadingState {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  color: #6c757d;
  font-style: italic;

  p {
    margin: 0;
  }
}