@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-author-padding-top: Padding top of the slide
 * @default 64px and 32px on wider screen
 */

/**
 * @prop --slide-author-padding-bottom: Padding bottom of the slide
 * @default 64px and 32px on wider screen
 */

/**
 * @prop --slide-author-padding-start: Padding left of the slide
 * @default 64px and 32px on wider screen
 */

/**
 * @prop --slide-author-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: 3;
  --slide-header-footer-z-index: 1;

  --overflow: visible;
}

div.deckgo-slide {
  flex-flow: row;

  padding: 0;
  width: var(--slide-width);
  height: var(--slide-min-height, var(--slide-height));
}

div.deckgo-slide-author {
  width: 50%;

  display: flex;
  align-items: var(--slide-author-align, inherit);
  text-align: var(--slide-author-text-align, inherit);

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

  &.deckgo-slide-author-start {
    /**
     * @prop --slide-author-background-start: Left pane background
     */
    background: var(--slide-author-background-start);
    /**
     * @prop --slide-author-color-start: Left pane color
     */
    color: var(--slide-author-color-start);

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

    img {
      border-radius: 50%;
      /**
       * @prop --slide-author-img-size: The size of the image of the left pane
       * @default 80%
       */
      width: var(--slide-author-img-size, 80%);
      /**
       * @prop --slide-author-img-border: The border of the image of the left pane (only apply if circle mode is specified)
       */
      border: var(--slide-author-img-border);
    }

    position: relative;

    &.deckgo-slide-author-none {
      display: none;
    }

    &.deckgo-slide-author-cover {
      &:before {
        content: "";
        width: 100%;
        height: var(--slide-height);
        top: 0;
        left: 0;
        position: absolute;
        background-image: var(--slide-author-color-start-img-url);
        background-repeat: no-repeat;
        background-size: cover;
      }

      &.deckgo-slide-author-mobile {
        &:before {
          background-position: center;
        }
      }
    }
  }

  &.deckgo-slide-author-end {
    /**
     * @prop --slide-author-background-end: Right pane background
     */
    background: var(--slide-author-background-end);
    /**
     * @prop --slide-author-color-end: Right pane color
     */
    color: var(--slide-author-color-end);

    flex-direction: column;
    justify-content: center;

    &.deckgo-slide-author-none {
      width: 100%;
    }

    div.deckgo-slide-author-social {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;

      padding-top: var(--slide-author-social-padding-top, var(--slide-padding-top-default));
    }
  }
}

@media (min-width: 992px) {
  div.deckgo-slide-author {
    &.deckgo-slide-author-start {
      width: calc(100% / 3 * 1);
    }

    &.deckgo-slide-author-end {
      width: calc(100% / 3 * 2);
    }
  }
}

@media screen and (max-width: 768px) {
  div.deckgo-slide-author {
    &.deckgo-slide-author-start {
      padding-right: var(--slide-author-padding-end, 0);
    }
  }
}

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

::slotted([slot="social-link"]) {
  /**
   * @prop --slide-author-social-link-padding: Padding for the social links
   * @default 8px
   */
  padding: var(--slide-author-social-link-padding, 8px);
  max-width: 100%;
}

::slotted([slot="title"]),
::slotted([slot="author"]),
::slotted([slot="social-link"]) {
  z-index: 2;
  user-select: text;
}
