@use "../../../global/theme/editor/editor-fullscreen";

ion-nav app-deck-editor ion-content {
  div.editor {
    height: 100%;
    width: 100%;

    display: flex;

    @media screen and (min-width: 1201px) {
      --slides-aside-width: 190px;
    }
  }

  div.grid {
    height: 100%;
    width: calc(100% - var(--slides-aside-width, 0px));

    display: flex;
    flex-direction: column;

    div.deck {
      position: relative;
      display: block;
      height: inherit;

      main {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        @media screen and (min-width: 1200px) {
          left: calc(50% - 32px);
        }

        width: var(--main-size-width);
        height: var(--main-size-height);

        max-width: inherit;

        overflow: hidden;

        &.ready {
          box-shadow: rgba(0, 0, 0, 0.2) 0 3px 1px -2px, rgba(0, 0, 0, 0.14) 0 2px 2px 0, rgba(0, 0, 0, 0.12) 0 1px 5px 0;
        }
      }
    }

    app-actions-deck-editor {
      position: absolute;
      top: 0;
      right: 0;
      width: 96px;
    }

    @media screen and (max-width: 1200px) {
      app-actions-deck-editor {
        position: inherit;
        width: inherit;
      }
    }
  }
}

app-deck-editor {
  @import "../../../global/theme/editor/editor-deck-header-footer";
  @import "../../../global/theme/editor/editor-deck-social";
  @import "../../../global/theme/editor/editor-deck-transition";
  @import "../../../global/theme/editor/editor-loading";

  main {
    @import "../../../global/theme/editor/editor-deck";
    @import "../../../global/theme/editor/editor-deck-placeholder";
  }

  @import "node_modules/@deckdeckgo/styles/css/deck";

  height: 100%;

  ion-content {
    --overflow: hidden;

    --padding-top: 16px;
    --padding-start: 16px;
    --padding-end: 16px;
    --padding-bottom: 12px;
  }

  ion-content {
    deckgo-deck {
      visibility: hidden;
      opacity: 0;

      transition: opacity 0.15s ease-in-out;
    }

    &:not(.ready) {
      app-breadcrumbs,
      app-actions-deck-editor {
        display: none;
      }
    }

    &.ready {
      deckgo-deck {
        visibility: initial;
        opacity: 1;
      }
    }
  }

  deckgo-inline-editor {
    --deckgo-inline-editor-sticky-zindex: 10;

    ion-icon[slot="link"] {
      padding-top: 12px;
      font-size: 1.2rem;
    }

    ion-icon[slot="orderedList"],
    ion-icon[slot="unorderedList"] {
      padding-top: 10px;
      font-size: 1.6rem;
    }
  }

  app-spinner p {
    font-size: var(--font-size-normal);
    color: var(--ion-color-medium);
    text-align: center;
  }

  @media screen and (min-width: 1140px) {
    main {
      max-width: 960px;
    }
  }
}
