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

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

div.deckgo-playground-container {
  width: calc(var(--slide-width) - var(--slide-padding-end, 64px) - var(--slide-padding-start, 64px));
  /**
   * @prop --slide-playground-height: The height of the playground's container
   * @default calc(100% - 32px)
   */
  height: var(--slide-playground-height, calc(100% - 32px));

  /**
   * @prop --slide-playground-margin: The margin of the playground's container
   * @default 32px 0 32px
   */
  margin: var(--slide-playground-margin, 32px 0 32px);
  /**
   * @prop --slide-playground-overflow: The overflow of the playground's container
   * @default auto
   */
  overflow: var(--slide-playground-overflow, auto);

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

  @media screen and (max-width: 1024px) {
    width: calc(var(--slide-width) - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px));
  }
}

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