@import ../terminal-font
@import ../shared

$color1: #00a0b0
$color2: #6a4a3c
$color3: #cc333f
$color4: #eb6841
$color5: #edc951

=player-overlay
  background-color: rgba(0, 0, 0, 0.5)
  z-index: 10
  background-repeat: no-repeat
  background-position: center
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.player
  // float: left;
  display: block
  padding: 0px
  position: relative

  .font-sample, .hud
    +terminal-font

  .loading
    +player-overlay
    background-image: url(image-path("loader.gif"))

  .start-prompt
    +player-overlay
    z-index: 20
    cursor: pointer

    .play-button
      position: absolute
      left: 50%
      top: 50%
      width: 0

      .arrow
        color: white
        font-size: 140px
        width: 150px
        margin-left: -75px
        margin-top: -100px
        -webkit-font-smoothing: none
        text-align: center
        font-weight: bold

        &:hover
          text-shadow: 2px 2px 5px $main-color
          // -moz-transform: rotate(-5deg);
          // -webkit-transform: rotate(-5deg);

  .hud
    padding: 0
    margin: 0
    border: 0
    background-color: #eee
    opacity: 0
    position: absolute
    left: 2px
    right: 2px
    bottom: 2px
    height: 16px
    overflow: hidden
    color: black
    -webkit-transition: opacity 0.3s ease-in-out

    .toggle
      background-color: black
      color: white
      cursor: pointer

      .play
        display: inline

      .pause
        display: none

    .progress
      color: black
      cursor: pointer

      span:hover
        background-color: #777

    .time
      background-color: black
      color: white

  &.playing
    .hud .toggle
      background-color: $color4

      .play
        display: none

      .pause
        display: inline

  &:hover .hud
    opacity: 1.0