.viewfinder {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0ms ease-in-out;
}

/**
 * enabled="false"
 */

.viewfinder[enabled="false"] {
  pointer-events: none;
}

/**
 * scale-type=fill
 */

.viewfinder[scale-type=fill] {
  align-items: center;
}

/**
 * visible
 */

.viewfinder.visible {
  opacity: 1;
}

/**
 * @shutter
 */

.viewfinder.shutter {
  animation: 400ms shutter-animation;
}

/** Shutter Animation
 ---------------------------------------------------------*/

@keyframes shutter-animation {
  0% { opacity: 1; }
  1% { opacity: 0.2; }
  100% { opacity: 1 }
}

/** Frame
 ---------------------------------------------------------*/

/**
 * 1. The grid should never overflow the viewport.
 */

.viewfinder-frame {
  display: flex;
  position: relative;
  max-width: 100%; /* 1 */
  max-height: 100%; /* 1 */
  justify-content: center;
  align-items: center;
}

/** Video Container
 ---------------------------------------------------------*/

.viewfinder-video-container {
  flex-shrink: 0;
}

/** Video
 ---------------------------------------------------------*/

.viewfinder-video {
  width: 100%;
  height: 100%;
  outline: none;
}

/** Frame Grid
 ---------------------------------------------------------*/

.viewfinder-grid {
  visibility: hidden;
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/**
 * @grid=true
 */

[grid=on] .viewfinder-grid {
  visibility: visible;
}

.viewfinder-grid .row,
.viewfinder-grid .column {
  border: solid 0 rgba(255, 255, 255, 0.5);
}

/** Rows
 ---------------------------------------------------------*/
.viewfinder-grid .row {
  height: 33.33%;
}

.viewfinder-grid .row.middle {
  border-top-width: 0.1rem;
  border-bottom-width: 0.1rem;
}

/** Columns
 ---------------------------------------------------------*/

.viewfinder-grid .column {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 33.33%;
}

.viewfinder-grid .column.middle {
  left: 33.33%;
  border-right-width: 0.1rem;
  border-left-width: 0.1rem;
}

.viewfinder-grid .column.right{
  left: 66.66%;
}

/** Cells
 ---------------------------------------------------------*/

.viewfinder-grid .column .cell {
  width: 100%;
  border: solid 0.1rem rgba(0,0,0,0.2);
  margin-bottom: 0.1rem; /* To accomodate the grid between cells */
  height: 33.33%;
}

.viewfinder-grid .column .cell.middle {
  height: calc(33.33% - 0.2rem); /* To account for the border width of the grid */
}

/* Removes unwanted cell borders along the edge of the preview */

.viewfinder-grid .column.left .cell.top,
.viewfinder-grid .column.middle .cell.top,
.viewfinder-grid .column.right .cell.top {
  border-top-width: 0;
}

.viewfinder-grid .column.left .cell.top,
.viewfinder-grid .column.left .cell.middle,
.viewfinder-grid .column.left .cell.bottom {
  border-left-width: 0;
}

.viewfinder-grid .column.right .cell.top,
.viewfinder-grid .column.right .cell.middle,
.viewfinder-grid .column.right .cell.bottom {
  border-right-width: 0;
}

.viewfinder-grid .column.left .cell.bottom,
.viewfinder-grid .column.middle .cell.bottom,
.viewfinder-grid .column.right .cell.bottom {
  border-bottom-width: 0;
}