deckgo-deck {
  h1,
  h2,
  h3 {
    &:empty:not(:focus):after {
      content: "Click to add title";
    }
  }

  section {
    &:empty:not(:focus):after {
      content: "Click to add content";
    }
  }

  ol li,
  ul li {
    &:empty:not(:focus):after {
      content: "Click to add content";
    }
  }

  > * > deckgo-lazy-img,
  > * > deckgo-reveal[img] {
    border: 1px solid var(--ion-color-light);
  }

  > * > deckgo-lazy-img,
  > * > deckgo-reveal deckgo-lazy-img {
    &:not([img-src]):not([svg-src]) {
      position: relative;
      --deckgo-lazy-img-width: auto;
      font-size: 2em;
      min-height: 1.7em;
      display: block;
      height: 100%;

      &::after {
        content: "Click to add an image";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
      }
    }
  }

  deckgo-slide-split {
    h1,
    h2,
    h3 {
      &:empty:not(:focus):after {
        content: "Click to add content";
      }
    }
  }

  deckgo-slide-aspect-ratio {
    section {
      &:empty:not(:focus):after {
        content: "Double click to\A edit text";
        white-space: pre;
      }

      &:empty {
        min-width: 48px;
      }
    }
  }

  deckgo-slide-gif {
    h1,
    h2,
    h3,
    section {
      &:empty:not(:focus):after {
        content: "Click to add a caption";
      }
    }
  }

  deckgo-slide-author {
    h1,
    h2,
    h3,
    section {
      &:empty:not(:focus):after {
        content: "Click to tell something about yourself";
      }
    }
  }

  deckgo-slide-aspect-ratio {
    &:empty:not(:focus):after {
      content: "Add text, shapes or images";
      font-size: 2em;
      min-height: 1.7em;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      text-align: center;
    }

    [highlighted] {
      // Safari issue when typing text
      outline: 1px solid var(--ion-color-primary);
    }
  }

  [highlighted] {
    border: 1px solid rgba(var(--ion-color-primary-rgb), 0.4);
  }

  deckgo-highlight-code[highlighted] {
    border: none;
  }

  deckgo-reveal[highlighted] {
    border: none;

    > * {
      border: 1px solid rgba(var(--ion-color-primary-rgb), 0.4);
    }
  }
}
