

/*
 * In desktop panel mode i-amphtml-story-button-container acts as a sentinel
 * and covers the previous and next pages.
 * In mobile it is focusable for screen readers and the buttons are hidden.
 * In desktop full bleed it is not focusable since the buttons are visible.
 */
.i-amphtml-story-button-container {
  cursor: pointer !important;
  position: absolute !important;
  width: 30px !important;
  top: 0 !important;
  bottom: 0 !important;
  height: calc(var(--story-100dvh) - 150px) !important;
  margin: auto 0 !important;
  background: none !important;
  transition: 150ms opacity linear, 150ms visibility linear !important;
  outline: none !important;
  z-index: 100002 !important;
}

/* Hide pointer events on mobile so only visible to screenreaders like TalkBack */
amp-story:not([desktop]) .i-amphtml-story-button-container {
  pointer-events: none !important;
}

.next-container,
.i-amphtml-story-button-container.next-container > .i-amphtml-story-button-move {
  left: auto !important;
  right: 0 !important;
}

[dir=rtl] .next-container,
[dir=rtl] .i-amphtml-story-button-container.next-container > .i-amphtml-story-button-move {
  left: 0 !important;
  right: auto !important;
}

.i-amphtml-story-desktop-fullbleed .i-amphtml-story-button-container {
  pointer-events: none !important;
}

/* A11y pagination element. Focusable by screen readers. Visibly Hidden on mobile unless navigating with keyboard. */
amp-story:not([desktop]) .i-amphtml-story-button-move,
[dir=rtl] amp-story:not([desktop]) .i-amphtml-story-button-move {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  padding: 0 !important;
  pointer-events: none !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  background-position: center !important;
  /* Contrast protection. Make icons white. */
  filter: invert(100%) drop-shadow(0 0 3px #000b) !important;
}

body:not(.amp-mode-keyboard-active) amp-story:not([desktop]):not(.i-amphtml-story-desktop-one-panel) .i-amphtml-story-button-move {
  /* Hides background unless navigating with keyboard. */
  background: none !important;
}

[desktop] .i-amphtml-story-button-move {
  display: flex !important;
  position: fixed!important;
  top: 0!important;
  bottom: 0!important;
  margin: auto 12px!important;
  width: 54px!important;
  height: 54px!important;
  border: 0!important;
  background-repeat: no-repeat!important;
  justify-content: center!important;
  align-items: center!important;
  transition: 150ms opacity linear!important;
  cursor: pointer!important;
  pointer-events: all!important;
}

amp-story.i-amphtml-story-desktop-one-panel .i-amphtml-story-button-container {
  height: 48px !important;
  width: 48px !important;
  transform: translateY(-50%) !important;
  top: 50% !important;
  bottom: auto !important;
  pointer-events: all !important;
  /* Calculates position of button by factoring in page width. */
  --i-amphtml-story-desktop-one-panel-button-margin: max(10px, calc(50vw - 72px - var(--i-amphtml-story-desktop-one-panel-width) / 2));
}

amp-story.i-amphtml-story-desktop-one-panel .i-amphtml-story-button-container.prev-container {
  margin-inline-start: var(--i-amphtml-story-desktop-one-panel-button-margin) !important;
}

amp-story.i-amphtml-story-desktop-one-panel .i-amphtml-story-button-container.next-container {
  margin-inline-end: var(--i-amphtml-story-desktop-one-panel-button-margin) !important;
}

amp-story.i-amphtml-story-desktop-one-panel .i-amphtml-story-button-move,
[dir=rtl] amp-story.i-amphtml-story-desktop-one-panel .i-amphtml-story-button-move {
  filter: none !important;
  background-color: white !important;
  border-radius: 50% !important;
}

amp-story.i-amphtml-story-desktop-one-panel .i-amphtml-story-button-hidden {
  visibility: visible !important;
  opacity: .1 !important;
  pointer-events: none !important;
}

.i-amphtml-story-desktop-fullbleed .i-amphtml-story-button-move {
  background-size: 100% !important;
  background-color: #fff2 !important;
  border-radius: 50% !important;
  filter: invert(1)!important;
}

.prev-container > .i-amphtml-story-button-move,
[dir=rtl] .i-amphtml-story-fwd-next > .i-amphtml-story-button-move,
.i-amphtml-story-fwd-next > .i-amphtml-story-button-move,
[dir=rtl] .prev-container > .i-amphtml-story-button-move {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="m21.52 16.22 7.75 7.75M21.52 31.75 29.27 24"/></svg>')!important;
}

.prev-container > .i-amphtml-story-button-move,
[dir=rtl] .i-amphtml-story-fwd-next > .i-amphtml-story-button-move {
  left: 0!important;
  right: auto !important;
  transform: rotate(180deg) !important;
}

[dir="rtl"] .prev-container > .i-amphtml-story-button-move {
  transform: none !important;
}

.i-amphtml-story-fwd-next > .i-amphtml-story-button-move,
[dir=rtl] .prev-container > .i-amphtml-story-button-move {
  left: auto !important;
  right: 0 !important;
}

.i-amphtml-story-fwd-replay {
  pointer-events: none !important;
}

.i-amphtml-story-fwd-replay > .i-amphtml-story-button-move {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none"><path stroke="#000" stroke-linecap="round" stroke-width="2.4" d="M16.15 19.4a9.1 9.1 0 1 1-1.29 3.95"/><path stroke="#000" stroke-linecap="round" stroke-width="2.4" d="M15.6 15.1v4.61M20 19.71h-4.4"/></svg>') !important;
}

/* Do not display when hidden. */
.i-amphtml-story-button-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
