:host {
  display: block;

  position: relative;

  user-select: var(--slide-user-select, none);

  background: var(--background);
  color: var(--color);

  height: inherit;

  z-index: var(--zIndex, 1);

  --slide-padding-top-default: 64px;
  --slide-padding-end-default: 64px;
  --slide-padding-bottom-default: 64px;
  --slide-padding-start-default: 64px;

  @media screen and (max-width: 1024px) {
    --slide-padding-top-default: 32px;
    --slide-padding-end-default: 32px;
    --slide-padding-bottom-default: 32px;
    --slide-padding-start-default: 32px;
  }
}

div.deckgo-slide {
  display: flex;

  overflow: var(--overflow, hidden);

  padding: var(--slide-padding-top, var(--slide-padding-top-default)) var(--slide-padding-end, var(--slide-padding-end-default))
    var(--slide-padding-bottom, var(--slide-padding-bottom-default)) var(--slide-padding-start, var(--slide-padding-start-default));

  width: calc(
    var(--slide-width) - var(--slide-padding-start, var(--slide-padding-start-default)) -
      var(--slide-padding-end, var(--slide-padding-end-default))
  );
  height: calc(
    var(--slide-height) - var(--slide-padding-top, var(--slide-padding-top-default)) -
      var(--slide-padding-bottom, var(--slide-padding-bottom-default))
  );
  min-height: calc(
    var(--slide-min-height) - var(--slide-padding-top, var(--slide-padding-top-default)) -
      var(--slide-padding-bottom, var(--slide-padding-bottom-default))
  );

  user-drag: none;
  -webkit-user-drag: none;
}

@media print {
  div.deckgo-slide {
    padding: 0;
    page-break-after: always;
    height: 100vh;
  }

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

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