amp-story.css

/**
 * Copyright 2017 The AMP HTML Authors. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS-IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import './amp-story-access.css';
@import './amp-story-affiliate-link.css';
@import './amp-story-desktop-panels.css';
@import './amp-story-draggable-drawer.css';
@import './amp-story-page-attachment.css';
@import './amp-story-templates.css';
@import './amp-story-user-overridable.css';
@import './amp-story-vertical.css';
@import './pagination-buttons.css';

/** Common */
amp-story, amp-story-page, amp-story-cta-layer {
  contain: strict !important;
  overflow: hidden !important;
  -webkit-touch-callout: none !important;
}

amp-story-grid-layer {
  contain: size layout !important;
  -webkit-touch-callout: none !important;
}

amp-story amp-consent {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
  background: none !important;
  z-index: initial !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

/**
 * amp-hidden uses visiblity: hidden that does not propagate to shadow trees
 * because of amp-story-shadow-reset.css. Use display: none instead.
 */
amp-consent.amp-hidden {
  display: none !important;
}

.i-amphtml-story-system-reset,
.i-amphtml-story-system-reset * {
  border: none !important;
  box-sizing: initial !important;
  color: initial !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: initial !important;
  font-weight: initial !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: start !important;
  text-shadow: none !important;
  width: auto !important;
}

/** Story level */
amp-story {
  height: 100% !important;
  position: relative !important;
  text-rendering: geometricPrecision !important;
  user-select: none !important;
  width: 100% !important;
  /* Disables double tap to zoom, and ensures fast-tap is enabled on iOS. */
  touch-action: manipulation !important;
}

html.i-amphtml-story-standalone {
  font-size: calc(2.5 * var(--story-page-vmax, 8px));
}

html.i-amphtml-story-standalone,
html.i-amphtml-story-standalone body {
  font-size: calc(2.5 * var(--story-page-vh, 8px));
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  border: 0 !important;
  /** Remove the cursor: pointer; style set by the runtime, to avoid wrong
      touch feedback on mobile, like a flashing overlay on page transitions. */
  cursor: auto !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

p,
h4 {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.17rem;
}

h5 {
  font-size: 0.83rem;
}

h6 {
  font-size: 0.67rem;
}

html.i-amphtml-story-standalone #i-amphtml-wrapper body {
  /** AMP runtime adds a 1px border on iOS iframes, causing the body to be
      1px bigger than the viewport. */
  border-top: none !important;
  overflow: hidden !important;
}

amp-story[standalone] {
  align-self: center !important;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5) !important;
  height: 100% !important;
  justify-self: center !important;
  max-height: initial !important;
  max-width: initial !important;
  min-height: initial !important;
  min-width: initial !important;
}

amp-story[standalone].amp-notbuilt {
  /* Ensures amp-story has a height and is prerendered. */
  min-height: 1px !important;
}

amp-story[standalone]:-webkit-full-screen {
  height: 100vh !important;
  max-height: none !important;
  max-width: none !important;
}

amp-story[standalone]:-moz-full-screen {
  height: 100vh !important;
  max-height: none !important;
  max-width: none !important;
}

amp-story[standalone]:-ms-fullscreen {
  height: 100vh !important;
  max-height: none !important;
  max-width: none !important;
}

amp-story[standalone]:fullscreen {
  height: 100vh !important;
  max-height: none !important;
  max-width: none !important;
}

amp-story[hide] {
  display: none !important;
}

amp-story .amp-video-eq {
  height: 14px !important;;
  width: 14px !important;
}

amp-story .amp-video-eq .amp-video-eq-col {
  margin-right: 2px !important;
}

amp-story .amp-video-eq .amp-video-eq-col:last-child {
  margin-right: 0 !important;
}

amp-story .amp-video-eq:not(.amp-video-eq-play), .i-amphtml-story-no-audio-ui .amp-video-eq {
  display: none !important;
}

/** Page level */
.i-amphtml-story-media-query-matcher,
amp-story-page {
  bottom: 0 !important;
  height: auto !important;
  left: 0 !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  opacity: 1 !important;
  /** Required by Chrome to consider touch events on story-pages as user gestures. */
  touch-action: none !important;
  transition: none !important;
  z-index: 0 !important;
}

.i-amphtml-story-media-query-matcher {
  height: inherit !important;
  width: inherit !important;
  border: 0 !important;
  z-index: -1 !important;
}

amp-story-page[active] {
  z-index: 1 !important;
}

.i-amphtml-story-sidebar[open] {
  animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1) !important;
  animation-duration: 0.3s !important;
  animation-name: i-amphtml-sidebar-slide-in-right;
}

[desktop] .i-amphtml-story-sidebar {
  min-width: 25% !important;
  max-width: 600px !important;
}

.i-amphtml-story-sidebar {
  min-width: 75% !important;
  max-width: 360px !important;
  animation-timing-function: cubic-bezier(0.4, 0.0, 1, 1)  !important;
  animation-duration: 0.2s !important;
  animation-name: i-amphtml-sidebar-slide-out-right;
}

/* Setting `translateY` distances as a trick so that the runtime schedules
 * layout for the next N pages. The default value (1000%) means that pages are
 * not be automatically laid out. Max distance is set to 2 (next 2 pages) since
 * we don't want to schedule any further pages. */

amp-story-page:not(:first-of-type):not([distance]):not([active]) {
  transform: translateY(1000vh) !important;
}

amp-story-page:not([active]) {
  transform: translateY(1000vh) !important;
}

/**
 * Note: If updating the [active] or [distance] attributes names, please also
 * update them in the ampdoc.css file.
 */
amp-story-page[active],
amp-story-page[distance="0"],
amp-story-page[distance="1"] {
  transform: translateY(0) !important;
}

amp-story-page[distance="2"] {
  transform: translateY(100%) !important;
}

amp-story-page [data-text-background-color] {
  border-radius: 3px !important;
  line-height: 1.5em !important;
  padding: 2px 4px !important;
  text-indent: 0 !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

[desktop].i-amphtml-story-bookend-active amp-story-page[active] {
  filter: blur(3px) !important;
  transition: filter 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
}

/* TODO(gmajoulet): move the overlay to the bookend styles. */
.i-amphtml-story-bookend-active amp-story-page[active]::after {
  content: '' !important;
  display: block !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  position: absolute !important;
  background: #000 !important;
  z-index: 2 !important;
  animation: i-amphtml-bookend-overlay-opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) forwards !important;
}

@keyframes i-amphtml-bookend-overlay-opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.75;
  }
}

.i-amphtml-story-opacity-mask {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  display: block !important;
  /* Prevent someone from making this a full-screen image */
  background-image: none !important;
  background-color: rgba(0, 0, 0, 0.75) !important;
  visibility: visible;
  z-index: 100003 !important;
  transition: visibility 0.3s, opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
}

.i-amphtml-story-opacity-mask[hidden] {
  opacity: 0 !important;
  pointer-events: none !important;
  display: block !important;
  visibility: hidden;
  transition: visibility 0.2s, opacity 0.2s cubic-bezier(0.4, 0.0, 1, 1) !important;
}

.i-amphtml-sidebar-mask {
  display: none !important;
}

/** Call to action layer, positioned at the bottom 20% of the screen. */
amp-story-cta-layer {
  display: block !important;
  position: absolute !important;
  top: 80% !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  z-index: 3 !important;
}

/** Grid level */
amp-story-grid-layer {
  box-sizing: border-box !important;
  display: grid !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
  /** Make sure grid layer does not act as a click shield on elements underneath */
  pointer-events: none !important;
}

/**
 * Click shield to make sure click events are never swallowed by videos on
 * Safari iOS 11.2, which would prevent the user from navigating through the
 * story.
 * See #14401
 */
 amp-story-grid-layer amp-video::after {
  content: "" !important;
  position: absolute !important;
  height: 100% !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

/**
 * Prevents pre-load placeholders from pushing content offscreen. 
 * Prevents preload placeholders from pushing content offscreen. 
 */
.i-amphtml-story-grid-template-fill amp-img img,
.i-amphtml-story-grid-template-fill amp-video video {
  position: absolute !important;
}

/**
 * Prevents amp-video to layout until its element has been swapped by the media
 * pool. See #26718 for context.
 */
amp-story-page[active]:not(.i-amphtml-layout) amp-video.i-amphtml-poolbound {
  display: none !important;
}

amp-story-grid-layer > * {
  pointer-events: auto !important;
}

/** Ensure clicks inside anchor tags are handled by the tooltip. */
amp-story-grid-layer a * {
  pointer-events: none !important;
}

/** Apply click shield on embedded components on initial load. */
amp-story-grid-layer .i-amphtml-embedded-component::after {
  content: "" !important;
  position: absolute !important;
  height: 100% !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

.i-amphtml-expanded-mode .i-amphtml-embedded-component::after {
  height: 0px !important;
  width: 0px !important;
}

.i-amphtml-expanded-mode amp-story-grid-layer,
.i-amphtml-expanded-mode amp-story-grid-layer * {
  contain: none !important;
  z-index: auto !important;
}

.i-amphtml-expanded-mode .i-amphtml-embedded-component.i-amphtml-expanded-component {
  z-index: 1 !important;
  transition: transform 0.225s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

.i-amphtml-story-grid-template-with-full-bleed-animation {
  position: absolute !important;
  display: block !important;
  padding: 0 !important;
}

.i-amphtml-story-grid-template-fill > * {
  bottom: 0 !important;
  height: auto !important;
  left: 0 !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: auto !important;
}

.i-amphtml-story-grid-template-vertical {
  grid-auto-flow: row !important;
  grid-template-columns: 100% !important;
}

.i-amphtml-story-grid-template-horizontal {
  grid-auto-flow: column !important;
  grid-template-rows: 100% !important;
}

.i-amphtml-story-grid-template-thirds {
  height: 100% !important;
  grid-template-rows: 33% 33% 33% !important; /* `fr` is broken in Safari. */
  grid-template-areas: "upper-third"
                       "middle-third"
                       "lower-third" !important;
}

.i-amphtml-story-grid-template-aspect {
  margin: auto;
  width: var(--i-amphtml-story-layer-width, 100%);
  height: var(--i-amphtml-story-layer-height, 100%);
  font-size: calc(var(--i-amphtml-story-layer-height, 100vh) / 10);
}

/**
 * Development mode
 */

.i-amphtml-story-dev-logs-button[data-count="0"],
.i-amphtml-story-bookend-active .i-amphtml-story-dev-logs-button {
  display: none !important;
}

.i-amphtml-story-dev-logs-button {
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.i-amphtml-story-dev-logs-button::after {
  background-color: #fff !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  color: #444;
  content: attr(data-count) !important;
  display: inline-block !important;
  font-family: Roboto !important;
  font-size: 11px !important;
  height: 12px !important;
  line-height: 12px !important;
  padding: 0 6px !important;
  position: absolute !important;
  right: 0 !important;
  top: 6px !important;
}

.i-amphtml-story-error-button {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#DB4437"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
}

.i-amphtml-story-warning-button {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFC107"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>') !important;
}

.i-amphtml-story-success-button {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#0F9D58"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>') !important;
}

amp-story[standalone] .i-amphtml-story-developer-log {
  background: rgba(0, 0, 0, 0.85) !important;
  bottom: 0 !important;
  box-sizing: border-box !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: 'Roboto' !important;
  left: 0 !important;
  max-height: 45% !important;
  padding: 0 !important;
  position: fixed !important;
  right: 0 !important;
  text-align: start !important;
  z-index: 100002 !important;
}

.i-amphtml-story-developer-log-header {
  align-items: center !important;
  background: rgb(3,169,244, 0.85) !important;
  display: flex !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  font-weight: bold !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
  text-align: center !important;
}

.i-amphtml-story-developer-log-close {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}

.i-amphtml-story-developer-log-context {
  color: #000 !important;
  font-family: 'Roboto Mono' !important;
}

.i-amphtml-story-developer-log-entries {
  list-style-type: none !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

.i-amphtml-story-developer-log-entry {
  align-items: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
  display: flex !important;
  padding: 20px !important;
}

.i-amphtml-story-developer-log-entry::before {
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  content: '';
  display: inline-block !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: 32px !important;
  margin-right: 20px !important;
  width: 32px !important;
}

.i-amphtml-story-developer-log-entry-error::before {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#DB4437"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
}

.i-amphtml-story-developer-log-entry-warning::before {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFC107"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>') !important;
}

.i-amphtml-story-developer-log-entry-success::before {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#0F9D58"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>') !important;
}

.i-amphtml-story-toast {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: inline-block !important;
  padding: 1.16em 1.33em !important;
  line-height: 1.33 !important;
  color: #fff !important;
  background: #212121 !important;
  animation: toast 2.2s !important;
  animation-fill-mode: both !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  max-width: 640px !important;
  z-index: 100004 !important; /** share menu + 1 */
}

@media (min-width: 640px) {
  .i-amphtml-story-toast {
    right: auto !important;
    font-size: 14px !important;
    margin: 0 auto 1.16em 1.16em !important;
    border-radius: 6px;
  }
}

@keyframes toast {
  0% {
    transform: translateY(100px);
    easing: cubic-bezier(0.0, 0.0, 0.2, 1);
  }
  8% {
    transform: translateY(0);
  }
  92% {
    transform: translateY(0);
    easing: cubic-bezier(0.4, 0.0, 1, 1);
  }
  100% {
    transform: translateY(100px);
  }
}

.i-amphtml-story-copy-successful {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  padding-left: 24px !important;
  color: #fff !important;
  display: flex !important;
}

.i-amphtml-story-copy-url {
  flex: 1 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-left: 40px !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Default loading spinner */

amp-story .amp-video-eq,
.i-amphtml-story-spinner {
  right: 12px !important;
  bottom: 12px !important;
}

[dir=rtl] amp-story .amp-video-eq,
[dir=rtl] .i-amphtml-story-spinner {
  left: 12px !important;
  right: auto !important;
}

.i-amphtml-story-spinner {
  display: inline-block !important;
  position: absolute !important;
  width: 24px !important;
  height: 24px !important;
  z-index: 10 !important;
}

.i-amphtml-story-spinner-container {
  width: 100% !important;
  height: 100% !important;
  direction: ltr !important;
}

.i-amphtml-story-spinner[active] .i-amphtml-story-spinner-container {
  animation: container-rotate 1294ms linear infinite !important;
}

@keyframes container-rotate {
  to { transform: rotate(360deg) }
}

.i-amphtml-story-spinner-layer {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  white-space: nowrap !important;
  color: white !important;
}

.i-amphtml-story-spinner[active] .i-amphtml-story-spinner-layer {
  animation-name: fill-unfill-rotate !important;
  animation-duration: 4400ms !important;
  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  animation-iteration-count: infinite !important;
  opacity: 1 !important;
  filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.25)) !important;
}

@keyframes fill-unfill-rotate {
  12.5% { transform: rotate(135deg) }
  25%   { transform: rotate(270deg) }
  37.5% { transform: rotate(405deg) }
  50%   { transform: rotate(540deg) }
  62.5% { transform: rotate(675deg) }
  75%   { transform: rotate(810deg) }
  87.5% { transform: rotate(945deg) }
  to    { transform: rotate(1080deg) }
}

.i-amphtml-story-spinner-circle-clipper {
  display: inline-block !important;
  position: relative !important;
  width: 50% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.i-amphtml-story-spinner-layer::after {
  left: 45% !important;
  width: 10% !important;
  border-top-style: solid !important;
}

.i-amphtml-story-spinner-layer::after,
.i-amphtml-story-spinner-circle-clipper::after {
  content: '' !important;
  box-sizing: border-box !important;
  position: absolute !important;
  top: 0 !important;
  border-width: 3px !important;
  border-radius: 50% !important;
}

.i-amphtml-story-spinner-circle-clipper::after {
  bottom: 0 !important;
  width: 200% !important;
  border-style: solid !important;
  border-bottom-color: transparent !important;
}

.i-amphtml-story-spinner-circle-clipper.left::after {
  left: 0 !important;
  border-right-color: transparent !important;
  transform: rotate(129deg) !important;
}

.i-amphtml-story-spinner-circle-clipper.right::after {
  left: -100% !important;
  border-left-color: transparent !important;
  transform: rotate(-129deg) !important;
}

.i-amphtml-story-spinner[active] .i-amphtml-story-spinner-circle-clipper::after {
  animation-duration: 1100ms !important;
  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  animation-iteration-count: infinite !important;
}

.i-amphtml-story-spinner[active] .i-amphtml-story-spinner-circle-clipper.left::after {
  animation-name: left-spin !important;
}

.i-amphtml-story-spinner[active] .i-amphtml-story-spinner-circle-clipper.right::after {
  animation-name: right-spin !important;
}

@keyframes left-spin {
  0% { transform: rotate(130deg) }
  50% { transform: rotate(-5deg) }
  to { transform: rotate(130deg) }
}

@keyframes right-spin {
  0% { transform: rotate(-130deg) }
  50% { transform: rotate(5deg) }
  to { transform: rotate(-130deg) }
}

.i-amphtml-story-page-error,
.i-amphtml-story-page-play-button {
  display: flex !important;
  align-items: center !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  height: 40px !important;
  border: 0 !important;
  margin: 8px 0 0 8px !important; /* Making the click target 48px.*/
  padding: 0 !important;
  animation: play-button-fly-in 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  background-color: transparent !important;
  z-index: 10000 !important;
}

.i-amphtml-story-expanded-view-overflow {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 1) !important;
  position: absolute !important;
}

.i-amphtml-expanded-view-close-button {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  margin: 12px !important;
  height: 24px !important;
  width: 24px !important;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 36 36" fill="rgba(255, 255, 255, 0.8)"><path d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z"/><path d="M0 0h36v36H0z" fill="none"/></svg>') !important;
  cursor: pointer !important;
  text-align: center !important;
}

@keyframes play-button-fly-in {
  0% {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.i-amphtml-story-page-error[hidden],
.i-amphtml-story-page-play-button[hidden] {
  display: none !important;
}

.i-amphtml-story-page-error-label,
.i-amphtml-story-page-play-label {
  color: #fff !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.36) !important;
}

.i-amphtml-story-page-error-icon,
.i-amphtml-story-page-play-icon {
  display: inline-block !important;
  height: 24px !important;
  width: 24px !important;
  margin: 0 8px !important;
  border-radius: 24px !important;
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.36)) !important;
}

.i-amphtml-story-page-error-icon {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>') !important;
}

.i-amphtml-story-page-play-icon {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 48 48" fill="#FFF"><path d="M0 0h48v48H0z" fill="none"/><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>') !important;
}

.i-amphtml-story-interactive-component {
  align-self: center;
  height: auto !important;
  pointer-events: none !important;
  min-width: 14em !important; /* 14em = 224px = the width of a narrow phone (320px) - tap-safe margins (48px * 2) */
  max-width: 25em !important;
  font-size: calc(var(--story-page-vmin) * 3); /* override with ems for pixel perfect layout */
  width: 100%;
  /* Properties overrideable by user */
  --interactive-accent-color: #005AF0;
  --interactive-prompt-background: var(--interactive-accent-color);
  --interactive-prompt-text-color: white;
  --interactive-prompt-alignment: initial;
  /* Shared properties by interactives (overrideable by themes) */
  --i-amphtml-interactive-option-accent-color: var(--interactive-accent-color) !important;
  --i-amphtml-interactive-option-background-color: white !important;
  --i-amphtml-interactive-options-chip-background-color: var(--i-amphtml-interactive-option-background-color) !important;
  --i-amphtml-interactive-option-text-color: #55595E !important;
  --i-amphtml-interactive-theme-border: rgba(85, 89, 94, 0.2) !important;
  --i-amphtml-interactive-theme-shading: rgba(85, 89, 94, 0.2) !important;
  --i-amphtml-interactive-theme-shading-base: rgb(222, 222, 225) !important;
  --i-amphtml-interactive-theme-shading-flash: rgba(85, 89, 94, 0.5) !important;
  --i-amphtml-interactive-chip-radius: 2em !important;
  --i-amphtml-interactive-chip-shadow: 0px 0px 0px transparent !important;
  --i-amphtml-interactive-chip-shadow-inset: inset 0px 0px 0px transparent !important;
  --i-amphtml-interactive-answer-choice-border: var(--interactive-accent-color) !important;
  --i-amphtml-interactive-answer-choice-background: white !important;
  --i-amphtml-interactive-prompt-text-size: 1.375em !important;
  --i-amphtml-interactive-prompt-line-height: 1.3em !important;
  --i-amphtml-interactive-strong-text-color: black !important;
  --i-amphtml-interactive-animation-time: .3s !important;
  --i-amphtml-interactive-ease-out-curve: cubic-bezier(.3, 0, 0, 1) !important;
  --i-amphtml-interactive-animation-delay: 0s !important;
  --i-amphtml-interactive-component-shadow: 0px 4px 12px rgba(60, 64, 67, 0.08), 0px 2px 4px rgba(60, 64, 67, 0.12);
  --i-amphtml-interactive-prompt-clamp: 4 !important;
  --i-amphtml-interactive-results-prompt-margin: 20px !important;
}

.i-amphtml-story-interactive-component[theme="dark"] {
  --i-amphtml-interactive-option-text-color: #A7ADB4 !important;
  --i-amphtml-interactive-option-background-color: #202124 !important;
  --i-amphtml-interactive-theme-border: rgba(167, 173, 180, 0.2) !important;
  --i-amphtml-interactive-theme-shading: rgba(167, 173, 180, 0.2) !important;
  --i-amphtml-interactive-theme-shading-base: rgb(60, 61, 63) !important;
  --i-amphtml-interactive-theme-shading-flash: rgba(167, 173, 180, 0.5) !important;
  --i-amphtml-interactive-strong-text-color: white !important;
}

.i-amphtml-story-interactive-component[chip-style="shadow"] {
  --i-amphtml-interactive-chip-shadow: 0px 2px 8px rgba(60, 60, 60, 0.2) !important;
  --i-amphtml-interactive-chip-shadow-inset: inset 4px 4px 8px rgba(0, 0, 0, 0.2) !important;
  --i-amphtml-interactive-theme-border: rgba(0, 0, 0, 0) !important;
}

.i-amphtml-story-interactive-component:not(amp-story-interactive-results)[chip-style="transparent"] {
  --i-amphtml-interactive-options-chip-background-color: transparent !important;
  --interactive-prompt-background: transparent !important;
  --interactive-prompt-alignment: center;
  --i-amphtml-interactive-chip-shadow: 0px 2px 8px rgba(60, 60, 60, 0.2) !important;
  --i-amphtml-interactive-chip-shadow-inset: inset 4px 4px 8px rgba(0, 0, 0, 0.2) !important;
  --i-amphtml-interactive-theme-border: rgba(0, 0, 0, 0) !important;
  --i-amphtml-interactive-component-shadow: none !important;
}

.i-amphtml-story-interactive-component[chip-style="shadow"][theme="dark"] {
  --i-amphtml-interactive-chip-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.6) !important;
  --i-amphtml-interactive-chip-shadow-inset: inset 4px 4px 8px rgba(0, 0, 0, 0.4) !important;
}

.i-amphtml-story-interactive-component[prompt-size="large"] {
  --i-amphtml-interactive-prompt-text-size: 1.75em !important;
  --i-amphtml-interactive-prompt-clamp: 3 !important;
}

.i-amphtml-story-interactive-component[prompt-size="small"] {
  --i-amphtml-interactive-prompt-text-size: 1.125em !important;
}

amp-story-interactive-binary-poll.i-amphtml-story-interactive-component, amp-story-interactive-results.i-amphtml-story-interactive-component {
  max-width: 18em !important;
}

amp-story-interactive-binary-poll[theme="dark"], amp-story-interactive-poll[theme="dark"] {
  --i-amphtml-interactive-option-accent-color: white !important;
}

amp-story-interactive-results:not([chip-style="transparent"]) {
  --interactive-prompt-text-color: var(--i-amphtml-interactive-strong-text-color);
}

amp-story-interactive-results[chip-style="transparent"] {
  --i-amphtml-interactive-option-text-color: black !important;
  --i-amphtml-interactive-options-chip-background-color: transparent !important;
  --interactive-prompt-background: transparent;
  --i-amphtml-interactive-component-shadow: none !important;
  --interactive-prompt-text-color: black;
  --i-amphtml-interactive-results-prompt-margin: 0px !important;
}
amp-story-interactive-results[theme="dark"][chip-style="transparent"] {
  --i-amphtml-interactive-option-text-color: white !important;
  --interactive-prompt-text-color: white;
}

amp-story-page.i-amphtml-story-desktop-panels .i-amphtml-story-interactive-component {
  --i-amphtml-interactive-animation-delay: 350ms !important;
}