@import "../../bootstrap/mixins"

#playback-view

  width: 55%
  height: 30px
  @include box-sizing(border-box)
  position: relative
  background: #383434

  button
    height: 26px
    i
      position: relative
      // TODO: need actual bigger button images
      //@include scale(1.5)
    background: transparent
    @include opacity(50)

  button:hover
    @include opacity(75)
    
  #play-button, #volume-button, #music-button
    float: left
    margin-left: 2px
    margin-top: 2px
    width: 25px
    position: relative
    
  #music-button
    @include opacity(25)
    font-size: 20px
    &:hover
      @include opacity(50)
    &.music-on
      @include opacity(50)
      &:hover
        @include opacity(75)
    
  #play-button, #volume-button
    i
      display: none
      position: absolute
      left: 2px
      top: 4px
    
  #playback-settings
    float: right
    position: relative
    top: 2px
    margin-right: 2px
    ul i
      margin: 0 10px
    li:hover
      background: #add8e6

  #play-button.playing i.icon-pause
    display: inline-block
  #play-button.paused i.icon-play
    display: inline-block
  #play-button.ended i.icon-repeat
    display: inline-block

  #volume-button.vol-up i.icon-volume-up
    display: inline-block
  #volume-button.vol-off i.icon-volume-off
    display: inline-block
    @include opacity(50)
    &:hover
      @include opacity(75)
  #volume-button.vol-down i.icon-volume-down
    display: inline-block

  .scrubber
    position: absolute
    left: 100px
    top: 0px
    bottom: 0px
    right: 100px

    .progress
      float: left
      width: 100%
      height: 14px
      margin-top: 8px
      cursor: pointer
      overflow: visible
      border: 1px solid #444
      // Remove gradient background in favor of solid fill
      background-color: #888
      background-image: none
      border-radius: 0
      border: 0

      .bar
        @include transition(width .0s linear)
        position: relative
        pointer-events: none
        // Remove gradient background in favor of solid fill
        background-color: #67A4C8
        //background-image: none  // gradient looks kind of cool though; keep it in

        .scrubber-handle
          position: absolute
          pointer-events: none
          right: -16px
          top: -9px
          background: transparent url(/images/level/playback_thumb.png)
          width: 32px
          height: 32px

      .ui-slider-handle
        height: 100%
        visibility: hidden
        border: 0
        top: 0
        margin-left: -11px
        margin-right: -11px
        // Don't load jQuery UI background image here
        background: transparent none