@import '../_variables'
@import '../_mixins'

#connectionOverlay
  position: fixed
  top: 0px
  left: 0px
  width: 100%
  height: 100%
  background: rgba(0, 0, 0, 0.5)
  z-index: 1000
  transition: all .25s linear 0

  &.connected
    height: 0px
    
    #connectionStatus
      top: -51px

#connectionStatus
  height: 50px
  line-height: 50px
  top: 0px;
  position: fixed
  background-color: #333
  width: 100%
  z-index: 100
  text-align: center

  span.message
    display: inline-block
    padding: 0px 10px
    font-weight: bold
    font-size: $fontLarge
    color: white

  button
    padding: 5px 8px
    position: relative
    top: -3px