// =============================================================================
// SCSS/SITE/STACKS/ETHOS/_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: 10px;
  right: 10px;
  bottom: 10px;
}

.jp-interface {
  position: relative;
  height: $jPlayerHeight;
  background-color: rgba(0, 0, 0, 0.65);
}



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

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

  &:hover a {
    color: $baseModBackground;
  }

  a {
    display: block;
    position: absolute;
    top: 0;
    overflow: hidden;
    width: $jPlayerHeight;
    height: $jPlayerHeight;
    outline: none;
    line-height: $jPlayerHeight;
    text-align: center;
    color: darken($baseModBackground, 35%);
    z-index: 1;

    span {
      visibility: hidden;
    }

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

    &:hover {
      color: $baseModBackground;
    }

    &: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: 63px;
  border-left: 1px solid $bodyBackground;
}

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

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



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

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

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

.jp-seek-bar {
  height: 10px;
  cursor: pointer;
  background-color: darken($baseModBackground, 35%);
}

.jp-play-bar {
  height: 10px;
  background-color: $baseModBackground;
}



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

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

.jp-volume-bar {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  top: 0;
  height: 10px;
  background-color: $black;
}

.jp-volume-bar-value {
  margin: 1px;
  width: 0px;
  height: 8px;
  background-color: $accentColor;
}