#camera-view {
  div.nowebrtc,
  div.error,
  div.video-preparing {
    display:none;
  }

  .panel {
    i {
      color: #a5a5a5;
      font-size: rem-calc(50);
    }

    h3, p {
      color: $charcoal;
    }
  }

  .camera-view {
    background: $oil;
    border: 1px solid $iron;
    padding-left: 0px !important;
    @include radius($global-radius);

    .image-container {
      height:100%;
      position: relative;
    }

    .video-container {
      height: 100%;
      height: calc(100vh - 240px);
      min-height: 300px;
      border-bottom: none;
      position: relative;
      @include radius($global-radius $global-radius 0 0);

      #videoScreen {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
      }

      img, video {
        display: block;
        margin: auto;
      }

      .video-off,
      .no-detection,
      .video-preparing {
        text-align: center;
        height: 100%;

        i {
          line-height: .5;
        }
      }

      .v-align {
        @include vertical-align;
      }

      i {
        font-size: rem-calc(100);
        color: $base;
      }

      h3 {
        color: $base;
      }

    }

    .buttons {
      background: $ghost;
      padding: rem-calc(10);
      @include radius(0 0 $global-radius $global-radius);

      button, .button, .loading-button {
        margin-bottom: 0;

        i {
          padding: 0 10px;
        }
      }
    }

    .video-on {
      display:none;
    }

    #camera-mode-slider {
      display:block;

      &.camera-mode {
        padding: 0 rem-calc(15) 0 0;

        p {
          color: $charcoal;
          margin: 0;

          i {
            font-size: rem-calc(16);
            margin: 0 4px 0 5px;
            text-shadow: -1px 0 1px $white;
          }
        }


        .switch input + label {
          display: block;
          width: 65px;
          height: 28px;
          border: $basic-border;
          background: $steel;

          &:after {
            height: 20px;
            top: rem-calc(3);
            left: rem-calc(3);
          }
        }

        .switch input:checked + label {

          &:after {
            left: rem-calc(36);
          }
        }
      }
    }

    #video-stream,
    .camera-image {
      max-height: 100%;
      display: block;
      width: auto;
      height: auto;
      opacity: 0.5;
      height: calc(100vh - 240px);
      min-height: 300px;
    }
  }

  &.nowebrtc .alert-box,
  &.error .alert-box {
    background: lighten($alert-color, 32%);
    border: 1px solid $alert-color;
    color: $jet;
    margin: rem-calc(25) 0;
  }

  &.preparing {
    .video-preparing {
      display:block;
    }

    .video-off {
      display:none;
    }

    .video-on {
      display:none;
    }

    #camera-mode-slider{
      display:none;
    }
  }

    &.nowebrtc {
      div.image-container {
        display:none;
      }

      div#camera-mode-slider{
        display:block;
      }

    div.nowebrtc {
      display: block;
      font-size: rem-calc(20);
      line-height: 1.3;
      background: $secondary-color;
      border: none;
      margin-bottom: 0;
      @include radius($global-radius $global-radius 0 0);

      b {
        user-select: all !important;
        cursor: pointer !important;
      }
      ol {
        text-align: left;
      }
      .micro-link {
        font-size: 13px;
        color: #353c46;
        padding: 3px;
        background: #d0cfcf;
        border-radius: 9px;
      }
      .text-to-copy {
        background: transparent;
        border: 1px dashed #353c4696;
        border-radius: 0;
        padding: 1px;
      }

      .browser-links {
        margin-top: rem-calc(15);

        li {
          border-bottom: 1px solid $iron;
          font-size: rem-calc(18);
          padding: 0;

          &:last-child {
            border-bottom: none;
          }

          a {
            display: block;
            padding: rem-calc(15);

            &:hover {
              background: darken($ghost, 10%);
            }
          }
        }

        img {
          max-width: rem-calc(110);
          padding: rem-calc(10);
        }
      }
    }
  }

  &.error {
    div.image-container {
      display:none;
    }

    div.error {
      display: block;
      font-size: rem-calc(26);
      margin: 25px;
      p {
        font-size: rem-calc(20);
        margin-top: rem-calc(10);
      }
    }

    .video-off {
      display:none;
    }

    .video-on {
      display:none;
    }

    #camera-mode-slider {
      display:none;
    }
  }

  &.streaming {
    .video-preparing{
      display:none;
    }

    .video-off {
      display:none;
    }

    .video-on {
      display:block
    }

    #camera-mode-slider{
      display:block;
    }
  }
}

@media #{$small-only} {
  #camera-view {
    .camera-view {
      .buttons {
        button, .button, .loading-button {
          float: left;
        }
      }
    }
  }
}

@media #{$large-up} {
  #camera-view {
    &.nowebrtc {
      div.nowebrtc {
        margin-top: 0;
        .browser-links {
          li {
            border-right: 1px solid $iron;
            border-bottom: none;

            &:last-child {
              border-right: none;
            }
          }
        }
      }
    }
  }
}
