@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;

  font-size: var(--slide-font-size, var(--slide-auto-ratio-font-size, var(--slide-auto-font-size, 1em)));
}

:host(.deckgo-read-only) {
  pointer-events: none;
}

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

  position: relative;

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

  div.deckgo-aspect-ratio-content {
    position: relative;

    width: calc(
      var(--slide-width) - var(--slide-padding-start, var(--slide-padding-start-default)) -
        var(--slide-padding-end, var(--slide-padding-end-default))
    );
    height: calc(
      (
          var(--slide-width) - var(--slide-padding-start, var(--slide-padding-start-default)) -
            var(--slide-padding-end, var(--slide-padding-end-default))
        ) * 9 / 16
    );

    overflow: visible;

    &.deckgo-aspect-ratio-content-grid {
      /**
       * @prop --slide-grid-background: The default grid color
       * @default linear-gradient(to bottom, rgba(0, 0, 0, 0) 98%, rgba(110, 109, 111, 0.4) 98%), linear-gradient(to right, rgba(0, 0, 0, 0) 98%, rgba(110, 109, 111, 0.4) 98%)
       */
      background: var(
        --slide-grid-background,
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 98%, rgba(110, 109, 111, 0.4) 98%),
        linear-gradient(to right, rgba(0, 0, 0, 0) 98%, rgba(110, 109, 111, 0.4) 98%)
      );
      /**
       * @prop --slide-grid-background-size: The default size of each squares of the grid
       * @default 2em 2em
       */
      background-size: var(--slide-grid-background-size, 2em 2em);
    }
  }

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

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

    text-align: center;

    background: var(--background);
    color: var(--color);

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

  ::slotted([slot="top"]) {
    top: 0;
    padding: var(--padding, 8px);
  }

  ::slotted([slot="bottom"]) {
    bottom: 0;
    padding: var(--padding, 32px 8px);
  }
}

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

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