@use "sass:math";

$scandit-blue: #7ed9e2;
$radial-circle-size: 180px;

.scandit {
  &.scandit-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  // Small spinner needed cause of this bug https://scandit.atlassian.net/browse/SDC-16787
  // When in android webview sometimes the video freeze.
  // Probably because of some kind of optimization/battery-saving
  // this small spinner is an hack to mock some movement on the screen and
  // prevent the screen from going in "sleep mode"
  // see also: https://bugs.chromium.org/p/chromium/issues/detail?id=1401352#c15
  &.scandit-container::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background-color: white;
    pointer-events: none;
    opacity: 0;
    animation: scandit-rotation 1s linear infinite;
  }

  &.scandit-barcode-picker {
    position: relative;
    min-width: 1px;
    min-height: 1px;
    width: 100%;
    height: 100%;
    background-color: #000;
  }

  .scandit-video {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;

    &.mirrored {
      transform: scale(-1, 1);
    }
  }

  .scandit-logo {
    position: absolute;
    bottom: 5%;
    right: 5%;
    max-width: 35%;
    max-height: 12.5%;
    pointer-events: none;
    z-index: 20;
    transform: translateZ(0);
  }

  .scandit-laser {
    z-index: 10;
    position: absolute;
    box-sizing: border-box;
    top: -9999px;
    pointer-events: none;
    transform: translateZ(0);
    display: flex;
    align-items: center;

    img {
      position: absolute;
      width: 100%;
      max-height: 47px;
      transition: opacity 0.25s ease;
      animation-duration: 0.25s;
    }
  }

  .scandit-viewfinder {
    z-index: 10;
    position: absolute;
    box-sizing: border-box;
    border: 2px #fff solid;
    border-radius: 10px;
    top: -9999px;
    animation-duration: 0.25s;
    transition: opacity 0.25s ease;
    pointer-events: none;
    transform: translateZ(0);

    &.paused {
      opacity: 0.4;
    }
  }

  .scandit-camera-switcher,
  .scandit-camera-fov-switcher,
  .scandit-torch-toggle {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    position: absolute;
    max-width: 15%;
    max-height: 15%;
    z-index: 10;
    cursor: pointer;
    filter: drop-shadow(0 2px 0 #808080);
    transform: translateZ(0);
  }

  .scandit-camera-switcher {
    top: 5%;
    left: 5%;
  }

  .scandit-camera-fov-switcher {
    bottom: 5%;
    left: 5%;
    filter: unset;
    width: 100px;
    height: 100px;

    img {
      max-height: 100%;
      max-width: 100%;
    }
  }

  .scandit-torch-toggle {
    top: 5%;
    right: 5%;
  }

  .scandit-camera-recovery {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15;
    cursor: pointer;
    transform: translateZ(0);
    background-color: #000;
    color: #fff;
  }

  .scandit-camera-upload {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 5;

    label {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      width: $radial-circle-size;
      height: $radial-circle-size;
      margin-top: math.div($radial-circle-size, 10);
      border-radius: 50%;

      input[type="file"] {
        position: absolute;
        top: -9999px;
      }
    }
  }

  .radial-progress {
    width: $radial-circle-size;
    height: $radial-circle-size;
    background-color: rgba(0, 0, 0, 0);
    border-width: 3px;
    border-style: solid;
    border-radius: 50%;
    position: absolute;
    transition: opacity 1s ease, border-color 0.5s;
    animation-duration: 0.25s;
    box-sizing: border-box;

    $increment: math.div(0.8, 20);

    @for $i from 0 through 20 {
      &[data-progress="#{$i * 5}"] {
        opacity: 0.2 + $increment * $i;
      }
    }
  }

  .scandit-flash-color {
    animation-name: scandit-flash-color;
  }

  .scandit-flash-white {
    animation-name: scandit-flash-white;
  }

  .scandit-flash-inset {
    animation-name: scandit-flash-inset;
  }

  .scandit-opacity-pulse {
    animation-duration: 0.333s, 1s;
    animation-iteration-count: 1, infinite;
    animation-delay: 0s, 0.333s;
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1), cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-name: scandit-opacity-pulse-before, scandit-opacity-pulse;
  }

  .scandit-hidden-opacity {
    opacity: 0;
  }
}

.scandit-hidden {
  display: none !important; /* stylelint-disable-line declaration-no-important */
}

@keyframes scandit-rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes scandit-flash-color {
  0% {
    filter: none;
  }

  50% {
    filter: drop-shadow(0 0 0.75rem #fff) drop-shadow(0 0 2.5rem $scandit-blue);
  }

  100% {
    filter: none;
  }
}

@keyframes scandit-flash-white {
  0% {
    filter: none;
  }

  50% {
    filter: drop-shadow(0 0 0.5rem #fff) drop-shadow(0 0 1rem #fff) drop-shadow(0 0 2.5rem #fff);
  }

  100% {
    filter: none;
  }
}

@keyframes scandit-flash-inset {
  0% {
    box-shadow: none;
  }

  50% {
    box-shadow: 0 0 0.5rem inset, 0 0 1rem inset, 0 0 2.5rem inset;
  }

  100% {
    box-shadow: none;
  }
}

@keyframes scandit-opacity-pulse-before {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.4;
  }
}

@keyframes scandit-opacity-pulse {
  0% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    opacity: 0.4;
  }
}