// =============================================================================
// SCSS/SITE/STACKS/ICON/_JPLAYER.SCSS
// -----------------------------------------------------------------------------
// Styles for jPlayer.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. jPlayer Media Container
//       a. All
//       b. Audio
//       c. Video
//   02. jPlayer Controls Container
//       a. Play/pause
//       b. Mute/unmute
//       c. Full screen/restore screen
//       d. Repeat/repeat off
//   03. jPlayer Controls
//   04. jPlayer Progress Bar
//   05. jPlayer Volume Bar
// =============================================================================

// jPlayer Media Container
// =============================================================================

//
// All.
//

.jp-jplayer { 
  position: absolute;
}


//
// Audio.
//

.jp-jplayer-audio {  }


//
// Video.
//

.jp-jplayer-video {
  background-color: $black;
}



// jPlayer Controls Container
// =============================================================================

.jp-controls-container {  }

.jp-controls-container-audio {  }

.jp-controls-container-video {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

.jp-interface {
  position: relative;
  border: 1px solid $baseBorderRgba;
  height: $jPlayerHeight;
  background-color: $baseModBackground;
}



// jPlayer Controls
// =============================================================================

.jp-controls {
  list-style-type: none;
  padding: 0;
  margin: 0;

  &:hover a {
    color: $accentColor;
  }

  a {
    display: block;
    position: absolute;
    top: 0;
    overflow: hidden;
    width: 30px;
    height: $jPlayerHeight - 2;
    border: 0 !important;
    outline: none;
    line-height: $jPlayerHeight - 2;
    text-align: center;
    color: darken($white, 15%);
    z-index: 1;

    span {
      visibility: hidden;
    }

    &:before {
      display: block;
      margin: 0 auto;
      text-decoration: inherit;
      @include font-awesome();
    }

    &:hover {
      color: $accentColor;
    }

    &:focus,
    &:active {
      outline: none;
    }
  }
}


//
// Play/pause.
//

a.jp-play,
a.jp-pause {
  left: 0;
}

a.jp-play {
  &:before {
    content: "\f04b";
  }
}

a.jp-pause {
  &:before {
    content: "\f04c";
  }
}


//
// Mute/unmute.
//

// a.jp-mute,
// a.jp-unmute {
//   right: 52px;
// }

// a.jp-mute {
//   &:before {
//     content: "\f028";
//   }
// }

// a.jp-unmute {
//   &:before {
//     content: "\f026";
//   }
// }



// jPlayer Progress Bar
// =============================================================================

.jp-progress-container {
  position: absolute;
  top: ($jPlayerHeight - 12) / 2;
  left: 32px;
  right: 10px;
  height: 10px;
}

.jp-progress { 
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  padding: 1px;
  background-color: $black;
}

.jp-seek-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  cursor: pointer;
  background-color: darken($white, 15%);
}

.jp-play-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  background-color: $accentColor;
}



// jPlayer Volume Bar
// =============================================================================

// .jp-volume-bar-container {
//   position: absolute;
//   top: ($jPlayerHeight - 12) / 2;
//   right: 10px;
//   width: 42px;
//   height: 10px;
// }

// .jp-volume-bar {
//   position: relative;
//   cursor: pointer;
//   top: 0;
//   height: 10px;
//   background-color: $black;
//   border-radius: 3px;
// }

// .jp-volume-bar-value {
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 0px;
//   height: 10px;
//   background-color: $white;
//   border-radius: 2px;
// }