.handsfree-debug-wrap
  position: fixed
  bottom: 0
  right: 0
  width: 350px
  max-width: 100%
  height: inherit
  z-index: 1
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.65)
  background: #fff
  border-radius: 3px

  div, video, canvas
    width: 100%
  
  > div
    padding: 5px

.handsfree-stopped
  .handsfree-debug-wrap,
  .handsfree-cursor
    display: none

.handsfree-hide-cursor
  .handsfree-cursor
    display: none !important

// @todo fix this in handsfree.js @see https://github.com/BrowseHandsfree/handsfreeJS/issues/17
.handsfree-canvas
  left: 0 !important
  width: 100% !important

// Simple Keyboard
.handsfree-simple-keyboard
  background: #ddd
  padding: 10px

  input
    width: 100%
    display: block
    padding: 10px
    background: #fff
    margin-bottom: 10px

  .simple-keyboard.hg-theme-default .hg-button
    height: 70px

.handsfree-stopped
  .handsfree-simple-keyboard,
  .handsfree-simple-keyboard-mask
    display: none !important

// Handsfree states
body.handsfree-stopped .handsfree-show-when-stopped
  display: initial
body.handsfree-started .handsfree-show-when-started
  display: initial
body.handsfree-stopped .handsfree-show-when-started
  display: none
body.handsfree-started .handsfree-show-when-stopped
  display: none

body.handsfree-stopped .handsfree-show-when-stopped.flex
  display: flex

// Cursor
.handsfree-cursor
  position: fixed
  background: #f00
  left: -100px
  top: -100px
  width: 20px
  height: 20px
  border-radius: 20px
  pointer-events: none
  z-index: 99999999999

// BOIDS
// @todo Move this into the boids component
.handsfree-boids-debugger-wrap
  position: fixed
  top: 0
  left: 0
  z-index: 0

.handsfree-boids-debugger-primary-canvas,
.handsfree-boids-debugger-secondary-canvas
  position: relative
  top: 0
  left: 0
  transform: scale(-1, 1)
  pointer-events: none

.handsfree-boids-debugger-secondary-canvas
  position: absolute