.classicwebcam_aspect_ratio_mixin {
  aspect-ratio: 1;

  &.ratio43 {
    aspect-ratio: 4 / 3;
  }

  &.ratio169 {
    aspect-ratio: 16 / 9;
  }

  &.ratio1610 {
    aspect-ratio: 16 / 10;
  }
}

.classicwebcam_flexbox_mixin {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#webcam_video_container {
  width: 100%;
  position: relative;
  outline: none;

  .video-controls {
    position: absolute;
    bottom: 0px;
    right: 8px;
    z-index: 10;
    opacity: 0.4;
  }

  &:hover {
    .video-controls {
      opacity: 1;
    }
  }

  #webcam_hls,
  #webcam_rtsp {
    width: 100%;
    height: 100%;
  }

  .webcam_rotated,
  .webcam_unrotated {
    position: relative;
    .classicwebcam_flexbox_mixin();
    .classicwebcam_aspect_ratio_mixin();

    .rotation_target {
      .classicwebcam_flexbox_mixin();
      div {
        .classicwebcam_flexbox_mixin();
      }
    }
  }

  .webcam_rotated {
    aspect-ratio: 1;
    .rotation_target {
      position: absolute;
      transform: rotate(-90deg);
      div {
        height: 100%;
      }
    }
  }
}

#webcam_img_container {
  width: 100%;
  position: relative;
  outline: none;

  background-color: black;

  .keycontrol_overlay {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 85%;
    color: white;
    padding: 0;

    kbd {
      border: 1px solid #eeeeee;
      border-radius: 3px;
      margin-left: 2px;
      margin-right: 2px;
      font-size: 90%;
      padding: 2px;
      min-width: 1em;
    }

    .keycontrol_overlay_heading {
      position: relative;
      padding: 10px;
      font-weight: bold;
    }

    .keycontrol_overlay_column {
      position: relative;
      width: 45%;
      padding: 10px;
      float: left;
    }
  }

  .nowebcam {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .text {
      color: white;
      text-align: center;
      position: relative;
      margin: auto;
      width: 80%;
      top: 50%;
      transform: translateY(-50%);
      display: block;

      &.webcam_loading {
        animation: pulsate 3s ease-out;
        animation-iteration-count: infinite;
      }
    }
  }

  .webcam_rotated {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    pointer-events: none;

    .webcam_fixed_ratio {
      position: absolute;
      transform: rotate(-90deg);
      top: 0;
      bottom: 0;
      pointer-events: none;

      .webcam_fixed_ratio_inner {
        width: 100%;
        height: 100%;
        pointer-events: none;
      }
    }
  }

  .webcam_unrotated {
    .webcam_fixed_ratio {
      width: 100%;
      pointer-events: none;

      .classicwebcam_aspect_ratio_mixin();

      position: relative;

      .webcam_fixed_ratio_inner {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        pointer-events: none;
      }
    }
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

// Predict height of webcam test container for modal positioning
// height is 3/4 the fixed modal width, for 4:3 webcam stream.
// Yes it's hardcoded, but so is the modal width.
#webcamTestContainer {
  min-height: 384px;
}
