@import _mixins
@import _variables

$callHeight = 80px

#wrapper
  position: relative !important 
  transition: all 1s

  //&.hasActiveCall
  //  transform: translateY($callHeight)

#calls
  position: fixed
  top: 0
  left: 0px
  transition: all 1s
  width: 100%
  height: $callHeight
  z-index: 1000
  background: #DDD

  &:empty, &.ending
    transform: translateY(-($callHeight))

  .call
    height: $callHeight
    padding: 0
    margin: 0

    &.incoming
      background: $activeBlue
      .callTime
        display: none
      .callerName:before
        content: "Incoming Call: "

    &.waiting
      background: $activeBlue
      
      .spinner div
        background-color: #fff

    &.calling
      background: $activeBlue
      .callTime
        display: none
      .callerName:before
        content: "Calling: "

    &.accepted
      background: $sidebarActive
      .callerName:before
        content: "On Call: "

    &.ending
      .callerName:before
        content: "Call ending with: "
      background: $grayBackground
      
    .callActions
      position: absolute
      left: 80px
      top: 38px
      display: block
      width: 100%

  nav
    float: left

  button  
    min-width: auto
    background-color: rgba(255,255,255,.3)
    gradient(rgba(255,255,255,.5),rgba(0,0,0,.1))
    border:
      top: 1px solid rgba(255,255,255,.6)
      bottom: 1px solid rgba(0,0,0,.1)
      left: 1px solid rgba(255,255,255,.2)
      right: 1px solid rgba(255,255,255,.2)
    width: 100px
    margin-right: 10px
    font-size: $font-size-large
    color: rgba(0,0,0,.75)
    text_shadow(rgba(255,255,255,.5),0,1px,0)
    float: left
    shadow(rgba(0,0,0,.3), 0, 1px, 3)
    &:hover
      background-color: rgba(255,255,255,.4)
    &:active
      inner_shadow(rgba(0,0,0,.2),0,1px,3)
      padding-top: 11px
      padding-bottom: 9px
      border:
        bottom: 1px solid rgba(255,255,255,1)
        top: 1px solid rgba(0,0,0,.2)

  .callerAvatar
    float: left
    width: 60px
    height: 60px
    margin: 10px
    roundall(30px)
    
  .callerName, .callTime  
    font-weight: $font-weight-bold
    color: #fff
    text_shadow(rgba(0,0,0,.7),0,1px,0)
    line-height: 1
    font-size: $font-size-h3

  .caller
    margin: 0
    padding: 5px 0 0 0
    padding-bottom: 0px

  .callerName
    display: inline
  .callerNumber
    display: inline
    margin-left: 10px

  .callTime
    position: absolute
    top: 12px
    right: 40px
    margin: 0