:host {
  display: block;
  position: relative;

  width: 100%;
  height: 100%;

  contain: size style;
}

main {
  position: absolute;

  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;

  touch-action: auto;
}

:host(.vertical),
:host(.horizontal) {
  main {
    overflow: hidden;
  }
}

:host(.papyrus) {
  main {
    overflow-x: hidden;
  }
}

:host(.vertical),
:host(.papyrus) {
  main {
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }
}

:host(.horizontal) {
  main {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
}

div.deckgo-deck {
  display: flex;

  position: absolute;
  top: 0;
  bottom: 0;

  z-index: var(--zIndex);

  --transformX: 0px;
  --transformY: 0px;
  --transformXDuration: 0ms;

  transform: translate3d(var(--transformX), var(--transformY), 0px);
  transition-duration: var(--transformXDuration, 0ms);

  ::-webkit-scrollbar {
    display: none;
  }

  --slide-width: 100vw;
  --slide-height: 100%;

  font-size: var(--slide-font-size, var(--slide-auto-font-size, 1em));
}

:host(.vertical),
:host(.papyrus) {
  div.deckgo-deck {
    flex-direction: column;
  }
}

:host(.papyrus) {
  div.deckgo-deck {
    --slide-user-select: auto;
  }
}

::slotted([slot="background"]) {
  display: var(--background-display, none);
  pointer-events: none;
}

::slotted([slot="actions"]) {
  display: none;
}

@media print {
  :host(.vertical),
  :host(.horizontal) {
    main {
      overflow: visible;
    }
  }

  :host(.papyrus) {
    main {
      overflow-x: visible;
    }
  }

  :host > * {
    page-break-after: always;
  }
}
