page-scan {
  .bar-button-default-md {
    color: #d8d8d8 !important;
  }
  .scroll-content {
    margin-top: 0px !important;
  }
  & > ion-content.content {
    background: transparent none;
  }

  .not-supported {
    text-align: center;
    margin-top: 10rem;
  }

  .page-scan-has-problems {
    z-index: 9999;
    height: 100%;
    background-color: $toolbar-background;

    .header-container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 223px;
      height: 60%;

      .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;
            margin-bottom: -0.5rem;
          }
        }

        .title {
          color: #fff;
          font-size: 1.2em;
        }
      }

      .subtitle {
        margin: auto;
        text-align: center;
        max-width: 300px;
        font-size: 0.9em;
        opacity: 0.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%;
        opacity: 70%;
      }
    }

    .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;
        margin-bottom: calc(4em + env(safe-area-inset-bottom));
        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);
        }
      }
      .url-btn {
        margin-bottom: calc(1em + env(safe-area-inset-bottom));
      }

      .icon-flash {
        background-image: url('../assets/img/icon-flash.svg');
      }

      .icon-camera-toggle {
        background-image: url('../assets/img/icon-camera-toggle.svg');
      }
    }
  }

  .browser-scanner {
    z-index: 1000;

    zxing-scanner {
      height: 100% !important;

      video {
        height: 100% !important;
        width: inherit !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        /* bring your own prefixes */
        transform: translate(-50%, -50%) !important;
      }
    }
  }

  .last-item {
    margin-left: auto !important;
  }

  .icon-wallet {
    background: transparent;
  }
}
