$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;
  z-index: 2;

  &.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) }
	}
      }
    }
  }
}