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

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

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

/**
 * @prop --slide-split-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;
}

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

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

div.deckgo-slide-vertical {
  @extend div, .deckgo-slide;
  flex-flow: column wrap;
}

div.deckgo-slide-split {
  flex: 1;

  height: calc(
    var(--slide-height) - (var(--slide-split-padding-bottom, var(--slide-padding-bottom-default))) -
      (var(--slide-split-padding-top, var(--slide-padding-top-default)))
  );
  width: calc(
    (
        var(--slide-width) - (2 * var(--slide-split-padding-end, var(--slide-padding-end-default))) -
          (2 * var(--slide-split-padding-start, var(--slide-padding-start-default)))
      ) / 2
  );

  align-items: var(--slide-split-align, inherit);
  text-align: var(--slide-split-text-align, inherit);

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

  &.deckgo-slide-split-start {
    /**
     * @prop --slide-split-display-start: start display
     * @default flex
     */
    display: var(--slide-split-display-start, flex);
    /**
     * @prop --slide-split-background-start: start background
     */
    background: var(--slide-split-background-start);
    /**
     * @prop --slide-split-color-start: start color
     */
    color: var(--slide-split-color-start);
  }

  &.deckgo-slide-split-end {
    /**
     * @prop --slide-split-display-end: end display
     * @default flex
     */
    display: var(--slide-split-display-end, flex);
    /**
     * @prop --slide-split-background-end: end background
     */
    background: var(--slide-split-background-end);
    /**
     * @prop --slide-split-color-end: end color
     */
    color: var(--slide-split-color-end);
  }
}

div.deckgo-slide-split-vertical {
  @extend div, .deckgo-slide-split;
  min-height: calc(
    (var(--slide-min-height, var(--slide-height)) / 2) - (var(--slide-split-padding-bottom, var(--slide-padding-bottom-default))) -
      (var(--slide-split-padding-top, var(--slide-padding-top-default)))
  );
  height: auto;
  width: calc(
    var(--slide-width) - (var(--slide-split-padding-end, var(--slide-padding-end-default))) -
      (var(--slide-split-padding-start, var(--slide-padding-start-default)))
  );
}

::slotted([slot="title"]) {
  flex: 1 100%;

  /**
   * @prop --slide-split-title-display: title display
   * @default none
   */
  display: var(--slide-split-title-display, none);
  max-height: fit-content;

  padding: var(--slide-split-title-padding-top, var(--slide-padding-top-default))
    var(--slide-split-title-padding-end, var(--slide-padding-end-default))
    var(--slide-split-title-padding-bottom, var(--slide-padding-bottom-default))
    var(--slide-split-title-padding-start, var(--slide-padding-start-default));
}

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