$v-scanner-background-color: #1e3186;
$v-scanner-guide-color: #647ce8;

html , body, .back-transparent, ion-app, .nav-decor {
  background: none transparent !important;
}

page-scan {
  color: #fff;
  background: transparent none;
  .navbar-transparent, .toolbar-background {
    background: $toolbar-scanner;
  }
  .not-supported-message {
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .page-scan-has-problems {
    height: 100%;
    background-color: $toolbar-background;
    .header {
      width: 100%;
      text-align: center;
      .image-container {
        background: #fff;
        padding: 1rem;
        width: 5rem;
        margin: auto;
        border-radius: 0.5rem;
        img {
          width: 2.5rem;
          height: 2.5rem;
        }
      }
      .title {
        color: #fff;
        font-size: 1.2em;
      }
    }
    .subtitle {
      margin: auto;
      text-align: center;
      max-width: 300px;
      font-size: 0.9em;
      opacity: .6;
      color: #fff;   
    }
    .body {
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 30px;
      background-color: $toolbar-background;
      div {
        color: #fff;
      }
    }
  }
  .page-scan-loading-camera {
    height: 100%;
    width: 100%
  }
  .page-scan-camera-ready {
    // view background is transparent to show video preview
    background: none transparent;
    height: 100%;
    .guides {
      display: flex;
      position: absolute;
      height: 100%;
      width: 100%;
      align-items: center;
      justify-content: center;
      top: 0;
      left: 0;
      .qr-scan-guides {
        width: 60%;
        max-width: 400px;
        margin-bottom: 8em;
        max-height: 50%;
      }
    }
    .scanner-controls {
      width: 100%;
      text-align: center;
      bottom: 0;
      position: absolute;
      left: 0;
      right: 0;
      .icon-flash, .icon-camera-toggle {
        border-radius: 50%;
        width: 4em;
        height: 4em;
        background-color: rgba(13, 13, 13, 0.79);
        background-repeat: no-repeat;
        background-clip: padding-box;
        background-size: 100%;
        display: inline-block;
        margin: 2em 1em;
        cursor: pointer;
        // hover for desktop only
        /*body:not(.platform-cordova) &:hover {
          background-color: rgba(31, 40, 78, 0.79);
        }*/
        &.active, &:active {
          background-color: rgba(100, 124, 232, 0.79);
        }
      }
      .icon-flash {
        background-image: url("../assets/img/icon-flash.svg");
      }
      .icon-camera-toggle {
        background-image: url("../assets/img/icon-camera-toggle.svg");
      }
    }
  }
}