$scan-mask-border: 10px;
$primary-color: white;

.mindar-ui-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: transparent;

  &.hidden {
    display: none;
  }
}

.mindar-ui-loading {
  .loader {
    border: 16px solid #222; // background color
    border-top: 16px solid $primary-color; // foreground color
    opacity: 0.8;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

.mindar-ui-compatibility {
  .content {
    background: black;
    color: white;
    opacity: 0.8;
    text-align: center;

    margin: 20px;
    padding: 20px;
    min-height: 50vh;
  }
}

.mindar-ui-scanning {
  .scanning {
    @media (min-aspect-ratio: '1/1') {
      width: 50vh;
      height: 50vh;
    }
    @media (max-aspect-ratio: '1/1') {
      width: 80vw;
      height: 80vw;
    }
    .inner {
      position: relative;
      width: 100%;
      height: 100%;
      opacity: 0.8;

      background: linear-gradient(
            to right,
            $primary-color $scan-mask-border,
            transparent $scan-mask-border
          )
          0 0,
        linear-gradient(to right, $primary-color $scan-mask-border, transparent $scan-mask-border) 0
          100%,
        linear-gradient(to left, $primary-color $scan-mask-border, transparent $scan-mask-border)
          100% 0,
        linear-gradient(to left, $primary-color $scan-mask-border, transparent $scan-mask-border)
          100% 100%,
        linear-gradient(to bottom, $primary-color $scan-mask-border, transparent $scan-mask-border)
          0 0,
        linear-gradient(to bottom, $primary-color $scan-mask-border, transparent $scan-mask-border)
          100% 0,
        linear-gradient(to top, $primary-color $scan-mask-border, transparent $scan-mask-border) 0
          100%,
        linear-gradient(to top, $primary-color $scan-mask-border, transparent $scan-mask-border)
          100% 100%;

      background-repeat: no-repeat;
      background-size: 40px 40px;

      .scanline {
        position: absolute;
        width: 100%;
        height: 10px;
        background: $primary-color;
        animation: move 2s linear infinite;

        @keyframes move {
          0%,
          100% {
            top: 0%;
          }
          50% {
            top: calc(100% - 10px);
          }
        }
      }
    }
  }
}