@import (less) "../Theme/constants.css";

.overlay {
  border: 1px solid #00c8a0;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  /* 300px box-shadow, so 600px by 600px, so as to definitely cover the modal */
  box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.7);
}

.rectangle {
  &:extend(.overlay);

  //default value of react-webcam https://github.com/cezary/react-webcam
  @width-frame: 640;
  @height-frame: 480;

  //Spec of overlay
  @width-percent: 80%;
  @aspect-ratio: 1.57;

  /*
    From the equation below one can find out @height-percent
    aspect-ratio = (width-frame * width-percent) / (height-frame * height-percent)
   */
  @height-percent: (@width-frame * @width-percent) / (@height-frame * @aspect-ratio);

  width: @width-percent;
  height: @height-percent;
}


.positionHole(@scale: 1, @offset-y: 105px) {
  @overlay-width: 740px;
  @overlay-height: 1800px;
  @hole-width: 264px;
  @hole-height: 328px;
  background-size: (@overlay-width * @scale) (@overlay-height * @scale);
  background-position: 50% ~"calc((@{hole-height} - @{overlay-height}) * @{scale} / 2 + @{offset-y})";
}

.face {
  background-image: url('assets/face-with-hole.svg');
  .positionHole(.75, 30px);
  background-repeat: no-repeat;
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  .positionHole(1);

  @media (--smaller-viewport) {
    .positionHole(.85);
  }

  .isWithoutHole & {
    background-image: url('assets/face-without-hole.svg');
  }
}