/* Editor-only overrides to make AMP stories readable in the block editor. */
amp-story {
  display: block !important;
  margin: 40px auto;
  border: 1px solid #444;
  padding: 20px;
  width: 100%;
  max-width: 420px;
}

amp-story-page {
  display: block !important;
  position: relative !important;
  margin-bottom: 50px;
  aspect-ratio: 9/16;
  width: 100%;
  overflow: hidden;
}

amp-story-page::before {
  position: absolute;
  top: -25px;
  left: 0;
  content: "Slide";
  color: #888;
  font-size: 11px;
  font-family: sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

amp-story-grid-layer {
  display: block !important;
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

amp-story-grid-layer[template=fill] {
  z-index: 1;
}

amp-story-grid-layer[template=vertical],
amp-story-grid-layer[template=thirds] {
  z-index: 10;
  pointer-events: none;
}

amp-story-grid-layer[template=vertical] .block-editor-block-list__layout,
amp-story-grid-layer[template=thirds] .block-editor-block-list__layout {
  pointer-events: auto;
}

.slide-dark .block-editor-rich-text__editable {
  color: #f4eddc;
}

amphtml-story-system-layer {
  margin-top: 0;
}