@import "./deckdeckgo-slide";
@import "./deckdeckgo-slide-slots";

/**
 * @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
 */

:host {
  --slide-actions-z-index: 1;
  --slide-header-footer-z-index: 1;
}

:host(.deckgo-slide-container-fullscreen) {
  height: var(--slide-gif-height, 100vh);

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

div.deckgo-slide {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

div.deckgo-gif-container {
  width: 100%;
  height: 100%;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  ::slotted([slot="top"]),
  ::slotted([slot="bottom"]) {
    position: absolute;

    left: 50%;
    transform: translate(-50%, 0);

    text-align: center;

    background: var(--background);
    color: var(--color);
    /**
     * @prop --padding: container padding
     * @default 8px
     */
    padding: var(--padding, 8px);
    /**
     * @prop --margin: container margin
     * @default 16px 0 and 32px 0 on wide screen
     */
    margin: var(--margin, 16px 0);

    @media screen and (max-width: 1024px) {
      margin: var(--margin, 32px 0);
    }

    z-index: var(--zIndex, 2);
  }

  ::slotted([slot="top"]) {
    top: 0;
  }

  ::slotted([slot="bottom"]) {
    bottom: 0;
  }
}

:host(.deckgo-slide-gif-hidden) {
  ::slotted([slot="top"]),
  ::slotted([slot="bottom"]) {
    display: none;
  }
}

::slotted([slot="title"]),
::slotted([slot="top"]),
::slotted([slot="bottom"]) {
  user-select: text;
}
