:host {
  display: block;
  position: relative;
  -webkit-user-select: var(--slide-user-select, none);
     -moz-user-select: var(--slide-user-select, none);
      -ms-user-select: var(--slide-user-select, none);
          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) {
  :host {
    --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);
  }
}
::slotted(ul),
::slotted(ol) {
  -webkit-padding-start: var(--slide-padding-start, var(--slide-padding-start-default));
          padding-inline-start: var(--slide-padding-start, var(--slide-padding-start-default));
}

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

::slotted([slot=actions]) {
  position: absolute;
  top: var(--slide-actions-top, 16px);
  right: var(--slide-actions-end, 32px);
  left: var(--slide-actions-start);
  display: var(--slide-actions-display);
  z-index: var(--slide-actions-z-index);
}

::slotted([slot=background]) {
  position: var(--slide-background-position, absolute);
  top: var(--slide-background-top, 0);
  right: var(--slide-background-end);
  left: var(--slide-background-start, 0);
  width: var(--slide-background-width);
  height: var(--slide-background-height);
  z-index: -2;
  pointer-events: none;
}

::slotted([slot=header]),
::slotted([slot=footer]) {
  position: absolute;
  left: 0;
  width: var(--slide-width);
  height: 100%;
  display: flex;
  align-items: center;
  z-index: var(--slide-header-footer-z-index, -1);
}

::slotted([slot=header]) {
  top: 0;
  width: calc(var(--slide-width) - var(--slide-header-margin-start, 32px) - var(--slide-header-margin-end, 32px));
  max-height: var(--slide-header-max-height, 48px);
  justify-content: var(--slide-header-justify-content, flex-start);
  margin: var(--slide-header-margin-top, 16px) var(--slide-header-margin-end, 32px) var(--slide-header-margin-bottom, 16px) var(--slide-header-margin-start, 32px);
}
@media screen and (max-width: 1024px) {
  ::slotted([slot=header]) {
    max-height: var(--slide-header-max-height, 16px);
  }
}

::slotted([slot=footer]) {
  bottom: 0;
  width: calc(var(--slide-width) - var(--slide-footer-margin-start, 16px) - var(--slide-footer-margin-end, 16px));
  max-height: var(--slide-footer-max-height, 32px);
  justify-content: var(--slide-footer-justify-content, center);
  margin: var(--slide-footer-margin-top, 16px) var(--slide-footer-margin-end, 16px) var(--slide-footer-margin-bottom, 16px) var(--slide-footer-margin-start, 16px);
}

/**
 * @prop --slide-user-select: user select
 * @default none
 */
/**
 * @prop --overflow: overflow of the slide
 * @default hidden
 */
/**
 * @prop --slide-padding-top: Padding top of the slide
 * @default 64px and 32px on wider screen
 */
/**
 * @prop --slide-padding-bottom: Padding bottom of the slide
 * @default 64px and 32px on wider screen
 */
/**
 * @prop --slide-padding-start: Padding left of the slide
 * @default 64px and 32px on wider screen
 */
/**
 * @prop --slide-padding-end: Padding right of the slide
 * @default 64px and 32px on wider screen
 */
/**
 * @prop --zIndex: z-index
 * @default 1
 */
/**
 * @prop --background: background
 * @prop --color: color
 */
div.deckgo-slide {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

div.deckgo-chart-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  align-self: center;
  /**
   * @prop --slide-chart-overflow: overflow
   * @default hidden
   */
  overflow: var(--slide-chart-overflow, hidden);
}

::slotted([slot=title]) {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}