/* this is where we display image and video previews */
.confirm {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  border-width: 0;
  background: #000; /* opaque */
  z-index: 100;     /* on top of all the camera stuff */
  transition: transform var(--transition-duration) linear;
  overflow: hidden;
  transform-origin: 0 0;
}

.confirm.hidden {
  display: none;
}

.confirm-media-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  bottom: 5rem;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.confirm-media-frame > .image-view {
  top: 0;  /* javascript modifies this position with a transform */
  left: 0;
  position: absolute;
  border-width: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

.confirm-media-frame > video {
  transform-origin: 0 0;
}

.confirm-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5rem;
  z-index: 100; /* above the dynamically inserted frame elements */
  padding: 0 1.5rem;
  display: flex;
}

.confirm-controls > button {
  height: 3.8rem;
  -moz-margin-end: 1rem;
  /* override shared/style/buttons.css, until strings can be shortened */
  padding: 0 0.2rem;
}

.confirm-controls > button:last-child {
  -moz-margin-end: 0;
}