app-remote {
  @import "../../../global/theme/button";

  main.connected {
    height: 100%;

    max-width: inherit;

    div.deck {
      position: relative;
      display: block;
      overflow: hidden;

      margin: 16px;
      margin-bottom: 0px;
      border-radius: 10px;
      border: 1px solid var(--ion-color-light-shade);
      box-shadow: var(--remote-box-shadow);
    }

    // deck grid layout
    .deck-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: calc((100vw - 32px) * 9 / 16) 1fr;
      grid-template-areas:
        "deck deck"
        "prev next";
      height: calc(100% - 70px);
      grid-gap: 16px;

      @media screen and (orientation: landscape) {
        grid-template-rows: calc((((100vw - 32px) / 2) - 16px) * 9 / 16) 2fr;
      }

      .deck {
        grid-area: deck;
      }
      .deck-navigation-button-prev {
        grid-area: prev;
        padding-left: 16px;
      }
      .deck-navigation-button-next {
        grid-area: next;
        padding-right: 16px;
      }
    }

    .deck-navigation-button {
      ion-button {
        border-radius: 10px;
        --box-shadow: var(--remote-box-shadow);

        width: 100%;
        // extra 8px space is required because animations might brake layout in FF
        height: calc(100% - 8px);

        --border-radius: 10px;

        --border-color: var(--ion-color-light-shade);
        --border-width: 1px;
        --border-style: solid;

        ion-label {
          text-transform: inherit;
          font-size: var(--font-size-normal);
          font-weight: 300;
          white-space: pre-wrap;

          position: absolute;
          bottom: 16px;
        }
      }
    }

    .deck-action-button {
      top: calc((((100vw - 32px) * 9 / 16) + 32px + 56px - 9rem + 100vh - 48px - 16px) / 2);
      z-index: 999;
    }

    @media screen and (orientation: landscape) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "deck notes";
      .deck-container {
        grid-area: deck;
        height: 100%;
      }
      .deck-navigation-button {
        padding-bottom: 16px;
      }
      .deck-action-button {
        top: calc((((((((100vw - 32px) / 2) - 16px) * 9 / 16))) + 32px + 56px - 9rem + 100vh) / 2);
        left: 25%;
        z-index: 999;
      }
      app-notes {
        grid-area: notes;
      }
    }
  }

  deckgo-deck {
    position: absolute;
    top: 0;
    left: 0;

    --pager-text-color: black;
    --pager-text-slides-display: block;
    --pager-size: 64px;
    --pager-text-size: 0.6rem;

    --slide-padding-top: 16px;
    --slide-padding-end: 32px;
    --slide-padding-bottom: 16px;
    --slide-padding-start: 32px;

    --slide-author-social-padding-top: 8px;

    --slide-author-padding-top: 16px;
    --slide-author-padding-end: 32px;
    --slide-author-padding-bottom: 16px;
    --slide-author-padding-start: 32px;

    @media screen and (min-width: 992px) {
      ion-label,
      ion-label[text-wrap].sc-ion-label-md-h,
      p {
        font-size: 1.2em;
      }
    }

    a,
    deckgo-social {
      pointer-events: none;
    }

    h1,
    h2,
    h3 {
      text-transform: inherit;
    }

    font-size: 12px;

    deckgo-lazy-img {
      pointer-events: none;
    }
  }

  ion-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  a.link-to-modal {
    color: inherit;
    cursor: pointer;
  }
}
