

/* 1em = 16px for interactive components, unless overriden by font-size */
.i-amphtml-story-interactive-binary-poll-container {
  color: var(--i-amphtml-interactive-option-accent-color) !important;
  --post-select-scale: 0.5 !important;
  --post-select-scale-variable: 1;
  border-radius: 2em !important;
}

.i-amphtml-story-interactive-binary-poll-option-container {
  background: var(--i-amphtml-interactive-option-background-color) !important;
  display: flex !important;
  justify-content: center !important;
  height: 5.625em !important;
  border-radius: 1em !important;
  overflow: hidden !important;
  box-shadow: var(--i-amphtml-interactive-component-shadow) !important;
  /* overflow bug fix for percent bar animation on ios safari  */
  transform: translateZ(0) !important;
}

.i-amphtml-story-interactive-option {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  flex-direction: column !important;
  width: 50%;
  position: relative !important;
  background-color: transparent !important;
  font: inherit !important;
  border: none !important;
  outline: none !important;
  color: inherit !important;
}

.i-amphtml-story-interactive-prompt {
  text-align: center !important;
}

.i-amphtml-story-interactive-option-text-container {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  flex-direction: column !important;
  transform: translateY(calc(1em + 1px)) !important;
}

.i-amphtml-story-interactive-post-selection
  .i-amphtml-story-interactive-option-text-container {
  transition: transform var(--i-amphtml-interactive-animation-time)
      var(--i-amphtml-interactive-ease-out-curve),
    opacity var(--i-amphtml-interactive-animation-time)
      var(--i-amphtml-interactive-ease-out-curve) !important;
  transform: translateY(0) !important;
}

.i-amphtml-story-interactive-binary-poll-container:not(.i-amphtml-story-interactive-post-selection)
  .i-amphtml-story-interactive-option-divider {
  height: 100% !important;
  width: 1px !important;
  opacity: 0.3 !important;
  background-color: var(--i-amphtml-interactive-theme-border) !important;
}

.i-amphtml-story-interactive-option
  .i-amphtml-story-interactive-option-percent-bar {
  height: 100% !important;
  width: 100% !important;
  position: absolute !important;
  opacity: 0 !important;
  transform-origin: left !important;
  transition: transform var(--i-amphtml-interactive-animation-time)
    var(--i-amphtml-interactive-ease-out-curve) !important;
}

[dir='rtl']
  .i-amphtml-story-interactive-option
  .i-amphtml-story-interactive-option-percent-bar {
  transform-origin: right !important;
}

.i-amphtml-story-interactive-option:last-child
  .i-amphtml-story-interactive-option-percent-bar {
  transform-origin: right !important;
}

[dir='rtl']
  .i-amphtml-story-interactive-option:last-child
  .i-amphtml-story-interactive-option-percent-bar {
  transform-origin: left !important;
}

.i-amphtml-story-interactive-post-selection
  .i-amphtml-story-interactive-option.i-amphtml-story-interactive-option-selected
  .i-amphtml-story-interactive-option-percent-bar {
  background-color: var(--i-amphtml-interactive-option-accent-color) !important;
  opacity: 0.2 !important;
  animation: i-amphtml-interactive-animation-flash-background forwards
    var(--i-amphtml-interactive-animation-time)
    var(--i-amphtml-interactive-ease-out-curve);
}

.i-amphtml-story-interactive-option-title {
  font-weight: 800 !important;
  font-size: 1.75em !important;
  margin: 0 !important;
  line-height: 1.3em !important;
  width: 4.42em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform var(--i-amphtml-interactive-animation-time)
    var(--i-amphtml-interactive-ease-out-curve) !important;
  height: 2.6em !important;
}

.i-amphtml-story-interactive-post-selection
  .i-amphtml-story-interactive-option-title {
  transform: scale(var(--post-select-scale)) !important;
}

.i-amphtml-story-interactive-option-title-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  transition: transform var(--i-amphtml-interactive-animation-time)
    var(--i-amphtml-interactive-ease-out-curve) !important;
  max-height: 2.6em !important;
}

.i-amphtml-story-interactive-post-selection
  .i-amphtml-story-interactive-option-title-text {
  transform: scale(var(--post-select-scale-variable)) !important;
}

.i-amphtml-story-interactive-option-percentage-text {
  font-weight: 700 !important;
  font-size: 1.375em !important;
  transform: scale(0) !important;
  display: inline-block !important;
  transition: transform var(--i-amphtml-interactive-animation-time)
    var(--i-amphtml-interactive-ease-out-curve) !important;
}

.i-amphtml-story-interactive-post-selection
  .i-amphtml-story-interactive-option-percentage-text {
  transform: scale(1) translateY(-0.75em) !important;
}

.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
  .i-amphtml-story-interactive-option::before {
  background-color: var(--i-amphtml-interactive-theme-shading-flash) !important;
  content: '' !important;
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  opacity: 0 !important;
  animation: i-amphtml-interactive-animation-landing-animation-flash-background var(--i-amphtml-interactive-animation-time) !important;
  animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el1) !important;
}

.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
  .i-amphtml-story-interactive-option:nth-of-type(2)::before {
  animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el2) !important;
}

.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
  .i-amphtml-story-interactive-option:focus::before {
    opacity: 1 !important;
    background-color: var(--i-amphtml-interactive-theme-shading) !important;
}

.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
  .i-amphtml-story-interactive-option
    .i-amphtml-story-interactive-option-title-text {
    animation: i-amphtml-story-interactive-option-title-text-landing-animation var(--i-amphtml-interactive-animation-time) !important;
    animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el1) !important;
}

.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
  .i-amphtml-story-interactive-option:nth-of-type(2)
    .i-amphtml-story-interactive-option-title-text {
    animation-delay: var(--i-amphtml-interactive-landing-animation-delay-offset-el2) !important;
}

@keyframes i-amphtml-story-interactive-option-title-text-landing-animation {
  33% {
    transform: scale(.95);
  }
}
