@import '../colours'; @import '../url-helpers';

// Player overrides

@mixin media-player {

display: block;
overflow: hidden;
margin: 30px 0;

&.player-wide {
  min-width: 580px;
}

span {
  display: block;
  margin: 0;
  padding: 0;
}

.video {
  position: relative;
  z-index: 3000;

  iframe {
    display: block;
  }
}

.logo {
  display: none;
}

.control-bar {
  position: relative;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid $border-colour;

  button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  a,
  button {
    &:focus {
      background-color: $focus-colour;
      outline: none;
    }
  }

  .player-controls {
    .play,
    .pause {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 40px;
      overflow: hidden;
      text-indent: -5000%;
      background-repeat: no-repeat;
      background-position: center left;
    }

    .play {
      background-image: file-url('player-icon-play.png');
    }

    .pause {
      background-image: file-url('player-icon-pause.png');
    }

    .rewind,
    .forward {
      position: absolute;
      top: 0;
      z-index: 30;
      height: 20px;
      width: 40px;
      overflow: hidden;
      text-indent: -5000%;
      background-repeat: no-repeat;
      background-position: center left;
    }

    .rewind {
      left: 0;
      background-image: file-url('player-icon-rewind.png');
    }

    .forward {
      left: 100%;
      margin-left: -40px;
      background-image: file-url('player-icon-forward.png');
    }
  }

  .volume-controls {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 40px;
    width: 180px;
    overflow: visible;

    .mute {
      position: absolute;
      bottom: 0;
      right: 0;
      height: 40px;
      width: 50px;
      padding-top: 1px;
      font-size: 14px;
      line-height: 40px;
      text-align: center;
    }

    .muted {
      color: $light-blue;

      ~ * {
        opacity: 0.333;
      }

      ~ .vol-display {
        text-decoration: line-through;
      }
    }

    .muted::after {
      content: "d";
    }

    .vol-down,
    .vol-up {
      position: absolute;
      bottom: 0;
      height: 40px;
      width: 60px;
      font-size: 24px;
      line-height: 40px;
      text-align: center;
      z-index: 10;

      &:hover,
      &:focus {
        color: $light-blue;
        background-color: transparent;
        outline: none;

        &:before {
          background-color: $focus-colour;
        }
      }

      &:before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 50%;
        height: 100%;
        z-index: -1;
      }
    }

    .vol-down {
      text-align: left;
      padding-left: 10px;
      left: 0;

      &:before {
        left: 0;
      }
    }

    .vol-up {
      text-align: right;
      padding-right: 10px;
      left: 65px;

      &:before {
        right: 0;
      }
    }

    .vol-display {
      position: absolute;
      bottom: 0;
      left: 25px;
      height: 40px;
      width: 0;
      padding-left: 35px;
      overflow: visible;
      font-size: 14px;
      font-weight: bold;
      line-height: 40px;
      background-repeat: no-repeat;
      background-position: center left;
      background-image: file-url('player-icon-volume.png');
    }
  }

  .current-time {
    position: absolute;
    bottom: 0;
    left: 45px;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    font-weight: bold;
  }

  .duration-time {
    display: none;
    position: absolute;
    bottom: 0;
    right: 10px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: bold;
  }

  .ui-slider {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 20px;
    overflow: hidden;
    background: $border-colour;

    .progress-bar {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      padding-bottom: 1px;
      background: $light-blue;
    }

    .ui-slider-handle {
      position: absolute;
      top: 0;
      height: 100%;
      padding-bottom: 1px;
      width: 20px;
      // Allow RGBA here, it is the only colour value with alpha transparency
      // scss-lint:disable ColorVariable
      color: rgba(0, 0, 0, 0.5);
      z-index: 10;
    }
  }
}

.ui-helper-hidden-accessible {
  position: absolute;
  left: -5000%;
}

}