


/* Non-overridable properties */
amp-image-lightbox {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  /* This is necessary due to crbug/248522 where touch events fail after
    transform */
  overflow: hidden !important;
  transform: translate3d(0, 0, 0) !important;
  touch-action: none !important;
}

/* Overridable properties */
amp-image-lightbox {
  z-index: 1000;
  background: rgba(0, 0, 0, 0.95);
  color: #f2f2f2;
}


.i-amphtml-image-lightbox-container {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* This is necessary due to crbug/248522 where touch events fail after
    transform */
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}


.i-amphtml-image-lightbox-trans {
  pointer-events: none !important;
  position: fixed;
  z-index: 1001;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}


.i-amphtml-image-lightbox-caption {
  position: absolute !important;
  z-index: 2;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

.i-amphtml-image-lightbox-caption.i-amphtml-empty,
.i-amphtml-image-lightbox-view-mode .i-amphtml-image-lightbox-caption {
  visibility: hidden;
}

/* Overridable properties */
.amp-image-lightbox-caption {
  background: rgba(0, 0, 0, 0.5);
  max-height: 25%;
  padding: 8px;
}


.i-amphtml-image-lightbox-viewer {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* This is necessary due to crbug/248522 where touch events fail after
    transform */
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}


.i-amphtml-image-lightbox-viewer-image {
  position: absolute;
  z-index: 1;
  display: block;
  transform-origin: 50% 50%;
}
