

.i-amphtml-story-interactive-img-container {
  --i-amphtml-interactive-img-option-size: 7.5em !important;
  --i-amphtml-interactive-img-option-gap: 1em !important;
  --i-amphtml-interactive-img-transform: scale(0.95) !important;

  /* 4.5em used instead of 4.375em to fix bug that renders pixels
  from container around the bottom-left and bottom-right corners */
  border-radius: 3.75em 3.75em 4.5em 4.5em !important;
}

.i-amphtml-story-interactive-img-option-container {
  background: var(
    --i-amphtml-interactive-options-chip-background-color
  ) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  border-radius: 4.375em !important;
  flex-wrap: wrap !important;
  padding: var(--i-amphtml-interactive-img-option-gap) !important;
}

.i-amphtml-story-interactive-img-option {
  width: var(--i-amphtml-interactive-img-option-size) !important;
  height: var(--i-amphtml-interactive-img-option-size) !important;
  position: relative !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
}

.i-amphtml-story-interactive-img-option:nth-child(3) {
  margin-top: var(--i-amphtml-interactive-img-option-gap) !important;
}

.i-amphtml-story-interactive-img-option:nth-child(3):last-child {
  margin: auto !important;
  margin-top: 0 !important;
}

.i-amphtml-story-interactive-img-option-img {
  border-radius: 50% !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  background-color: var(
    --i-amphtml-interactive-placeholder-background
  ) !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow: var(--i-amphtml-interactive-img-border) !important;
  /* Needed for overflow inconsistencies during animations on some browsers */
  position: relative !important;
  z-index: 1 !important;
  /** Needed for occasional image clipping during animation */
  clip-path: circle(
    calc(var(--i-amphtml-interactive-img-option-size))
  ) !important;
}

.i-amphtml-story-interactive-img-option:focus {
  outline: none !important;
}

.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
  .i-amphtml-story-interactive-img-option:focus
  .i-amphtml-story-interactive-img-option-img {
  transform: var(--i-amphtml-interactive-img-transform) !important;
}

.i-amphtml-story-interactive-img-option-img::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform: scaleY(0) !important;
  transform-origin: bottom !important;
  opacity: 0.5 !important;
}

.i-amphtml-story-interactive-option-selected
  .i-amphtml-story-interactive-img-option-img {
  box-shadow: inset 0 0 0 0.25em var(--i-amphtml-interactive-option-post-color),
    var(--i-amphtml-interactive-img-border) !important;
}

.i-amphtml-story-interactive-post-selection.i-amphtml-story-interactive-has-data
  .i-amphtml-story-interactive-img-option-img::before {
  background-color: var(--i-amphtml-interactive-option-post-color) !important;
  transform: scaleY(var(--option-percentage, 0)) !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-has-data
  .i-amphtml-story-interactive-img-option-percentage-text {
  position: absolute !important;
  bottom: 0.625em !important;
  text-align: center !important;
  right: 0 !important;
  left: 0 !important;
  color: white !important;
  font-weight: 700 !important;
  text-shadow: 0 0 0.7em rgba(0, 0, 0, 0.5) !important;
}

.i-amphtml-story-interactive-active:not(.i-amphtml-story-interactive-post-selection)
  .i-amphtml-story-interactive-img-option-img {
  animation: i-amphtml-story-interactive-img-option-img-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-img-option:nth-of-type(2)
  .i-amphtml-story-interactive-img-option-img {
  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-img-option:nth-of-type(3)
  .i-amphtml-story-interactive-img-option-img {
  animation-delay: var(
    --i-amphtml-interactive-landing-animation-delay-offset-el3
  ) !important;
}

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

@keyframes i-amphtml-story-interactive-img-option-img-landing-animation {
  33% {
    transform: var(--i-amphtml-interactive-img-transform);
  }
}
