

.i-amphtml-image-slider-container {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  /* Fix iOS translate + overflow: hidden bug */
  transform: translateZ(0) !important;
  /* Remove webkit tap highlight grayish color */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.i-amphtml-image-slider-left-mask {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
}

.i-amphtml-image-slider-right-mask {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

amp-image-slider amp-img > img {
  /* Deals with image not fitting size */
  object-fit: cover;
}

.i-amphtml-image-slider-push-left {
  transform: translateX(-50%);
}

.i-amphtml-image-slider-push-right {
  transform: translateX(50%);
}

.i-amphtml-image-slider-bar {
  /* make sure arrow directions not change in RTL */
  direction: ltr !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 3 !important;
}

.i-amphtml-image-slider-bar-stick {
  width: 20% !important;
  height: 100% !important;
  cursor: col-resize !important;
}
.i-amphtml-image-slider-bar-stick::before {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  top: 0 !important;
  left: 50% !important;
  bottom: 0 !important;
  border: 0.5px solid white !important;
  box-sizing: border-box !important;
  opacity: 0.5 !important;
  transform: translate(-50%, 0) !important;
}

.i-amphtml-image-slider-label-wrapper {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
}

.i-amphtml-image-slider-label-wrapper > [first],
.i-amphtml-image-slider-label-wrapper > [second] {
  position: absolute !important;
}

.i-amphtml-image-slider-hint-hidden {
  opacity: 0;
  transition: opacity linear 0.4s;
}

.i-amphtml-image-slider-hint {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 2;
  transition: opacity ease-in 0.4s;
}

.i-amphtml-image-slider-hint-left-wrapper {
  position: absolute !important;
  right: 50% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.i-amphtml-image-slider-hint-right-wrapper {
  position: absolute !important;
  left: 50% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.amp-image-slider-hint-left {
  background-size: 56px 16px;
  width: 56px;
  height: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 8"><g><path d="M4 5h12V3H4V0L0 4l4 4z" fill="#fff"/></g></svg>');
  filter: drop-shadow(3px 3px 4px black);
}

.amp-image-slider-hint-right {
  background-size: 56px 16px;
  width: 56px;
  height: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 8"><g><path d="M24 5h-12V3H24V0L28 4l-4 4z" fill="#fff"/></g></svg>');
  filter: drop-shadow(3px 3px 4px black);
}
