<script lang="ts" setup></script>
<template>
  <div class="qr-scanner w-full h-full pos-absolute">
    <div class="box">
      <div class="line"></div>
      <div class="angle"></div>
    </div>
  </div>
</template>
<style lang="scss">
.qr-scanner {
  background-color: #111;
  background-image: linear-gradient(
      0deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent
    );
  background-position: -1rem -1rem;
  background-size: 3rem 3rem;
}

.qr-scanner .box {
  position: relative;
  top: 50%;
  left: 50%;
  height: 100%;
  //   width: 75vw;
  //   max-width: 75vh;
  //   height: 75vw;
  //   max-height: 75vh;
  overflow: hidden;
  border: 0.1rem solid rgba(0, 255, 51, 0.2);
  transform: translate(-50%, -50%);
}

.qr-scanner .line {
  width: 100%;
  height: calc(100% - 2px);
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
  border-bottom: 3px solid #00ff33;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite;
  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  animation-delay: 1.4s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  position: absolute;
  display: block;
  width: 3vw;
  height: 3vw;
  content: '';

  border: 0.2rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
  top: 0;
  border-top-color: #00ff33;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
  bottom: 0;
  border-bottom-color: #00ff33;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
  left: 0;
  border-left-color: #00ff33;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
  right: 0;
  border-right-color: #00ff33;
}

@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>
