@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-slide-poll {
  height: 100%;
  width: 100%;

  display: grid;
  grid-template-columns: 40% 60%;

  /**
   * @prop --slide-poll-grid-column-gap: The column gap between the QR code and the chart
   * default 32px
   */
  grid-column-gap: var(--slide-poll-grid-column-gap, 32px);

  min-height: 0;

  > * {
    min-height: 0;
  }

  div.deckgo-slide-poll-qrcode {
    display: flex;
    flex-direction: column;

    /**
     * @prop --slide-poll-justify-content: The QR code column content justify position
     * default center
     */
    justify-content: var(--slide-poll-justify-content, center);
    /**
     * @prop --slide-poll-align-items: The QR code column content items alignment
     * default center
     */
    align-items: var(--slide-poll-align-items, center);
    /**
     * @prop --slide-poll-text-align: The QR code column text alignment
     * default center
     */
    text-align: var(--slide-poll-text-align, center);

    deckgo-qrcode {
      /**
       * @prop --slide-poll-background: The background behind the QR code component
       */
      background: var(--slide-poll-background);
    }
  }

  div.deckgo-slide-poll-chart {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    position: relative;

    --deckgo-chart-text-font-size: 1rem;
    --deckgo-chart-overflow: visible;
  }
}

.how-to {
  /**
   * @prop --slide-poll-how-to-max-width: The maximal width of the "how-to" slot
   * default calc(100% - 64px)
   */
  max-width: var(--slide-poll-how-to-max-width, calc(100% - 64px));
  /**
   * @prop --slide-poll-how-to-font-size: The font-size of the text of thee slot "how-to"
   * default 0.8em
   */
  font-size: var(--slide-poll-how-to-font-size, 0.8em);
  user-select: text;

  * {
    user-select: text;
  }
}

::slotted([slot="how-to"]) {
  display: none;
}

::slotted([slot="awaiting-votes"]) {
  position: absolute;
  /**
   * @prop --slide-poll-awaiting-votes-z-index: The z-index of the "awaiting-votes" slot
   * default 1
   */
  z-index: var(--slide-poll-awaiting-votes-z-index, 1);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /**
   * @prop --slide-poll-awaiting-votes-background: The background of the "awaiting-votes" slot
   * default rgba(255, 255, 255, 0.9)
   */
  background: var(--slide-poll-awaiting-votes-background, rgba(255, 255, 255, 0.9));
  /**
   * @prop --slide-poll-awaiting-votes-border-radius: The border-radios of the "awaiting-votes" slot
   * default 8px
   */
  border-radius: var(--slide-poll-awaiting-votes-border-radius, 8px);
  /**
   * @prop --slide-poll-awaiting-votes-padding: The padding of the "awaiting-votes" slot
   * default 8px
   */
  padding: var(--slide-poll-awaiting-votes-padding, 8px);
  pointer-events: none;
  user-select: none;
}

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