// Overrides for mejs player
// --------------------------------------------------
@mejs-color: @black;
@mejs-color-inverted: @white;

@mejs-icon: @white;

@mejs-time-current: @white;
@mejs-time-loaded: darken(@white, 25%);
@mejs-time-total: darken(@white, 50%);

@mejs-controls-height: 2rem;
@mejs-time-rail-height: 0.5rem;
@mejs-margin: 0.5rem;

@mejs-time-size: 0.75rem;

@mejs-time-float-size: 0.75rem;
@mejs-time-float-width: 2rem;

@mejs-cc-size: 0.75rem;

.mejs-container {
  // Play icon override
  // --------------------------------------------------
  .mejs-overlay {
    .mejs-overlay-button {
      .transform(translate(-50%,-50%));
      height: (@icon-size * 2) + @icon-padding;
      width: (@icon-size * 2) + @icon-padding;
      margin: 0;
      padding: @icon-padding / 2;
      background: none;
      box-shadow: 0 0 0 3px @white;
      border-radius: 50%;
      color: @white;
      opacity: .75;

      @media (min-width: @device-width-small) {
        height: (@icon-size * 3) + @icon-padding;
        width: (@icon-size * 3) + @icon-padding;
      }
    }

    .invert-play-icon & .mejs-overlay-button {
      color: @black;
      box-shadow: 0 0 0 3px @black;
    }

    .no-touch &:hover .mejs-overlay-button {
      background-position: 0 0;
      opacity: 1;
      .transition(opacity @duration ease-in);
    }

    .icon {
      .icon-video-play;
    }

    .icon:before {
      font-size: @icon-size * 2;

      @media (min-width: @device-width-small) {
        font-size: @icon-size * 3;
      }
    }
  }

  // Colour overrides
  // --------------------------------------------------
  .mejs-controls {
    background: none;
    background-color: @mejs-color;
  }

  .mejs-controls .mejs-time,
  .mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
    color: @mejs-color-inverted;
  }

  .mejs-controls .mejs-button button {
    color: @mejs-icon;
  }

  .mejs-controls .mejs-time-rail .mejs-time-total,
  .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
    background: none;
    background-color: @mejs-time-total;
  }

  .mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: none;
    background-color: @mejs-time-loaded;
  }

  .mejs-controls .mejs-time-rail .mejs-time-current,
  .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
    background: none;
    background-color: @mejs-time-current;
  }

  .mejs-controls .mejs-captions-button .mejs-captions-selector,
  .mejs-controls .mejs-volume-button .mejs-volume-slider {
    background: none;
    background-color: @mejs-color;
  }

  .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
    background: none;
    background-color: @mejs-time-current;
  }

  // Icon overrides
  // Icon classes must be defined in core/fonts/vanilla or
  // a custom font must be set up in the theme
  // --------------------------------------------------
  .mejs-controls .mejs-play button {
    .icon-video-play;
  }

  .mejs-controls .mejs-pause button {
    .icon-video-pause;
  }

  .mejs-controls .mejs-fullscreen-button button {
    .icon-video-fullscreen;
  }

  .mejs-controls .mejs-unfullscreen button {
    .icon-video-exit-fullscreen;
  }

  .mejs-controls .mejs-mute button {
    .icon-sound;
  }

  .mejs-controls .mejs-unmute button {
    .icon-sound-mute;
  }

  .mejs-controls .mejs-captions-button button {
    .icon-video-captions-off-2;
  }

  .mejs-controls .mejs-captions-enabled button {
    .icon-video-captions;
  }

  // Player controls
  // --------------------------------------------------
  .mejs-controls {
    height: @mejs-controls-height;
  }

  .mejs-controls .mejs-time-rail {
    height: @mejs-time-rail-height;
    margin: ((@mejs-controls-height - @mejs-time-rail-height) / 2) @mejs-margin;
    padding: 0;
  }

  .mejs-controls .mejs-time-rail span {
    height: @mejs-time-rail-height;
  }

  .mejs-controls .mejs-time-rail .mejs-time-total {
    height: @mejs-time-rail-height;
    margin: 0;
  }

  .mejs-controls .mejs-time {
    height: @mejs-time-size;
    margin: ((@mejs-time-size / 2) + (@mejs-margin / 2)) @mejs-margin;
    padding: 0;
    font-size: @mejs-time-size;
    line-height: 1;
  }

  // Button icon style overrides
  // --------------------------------------------------
  .mejs-controls .mejs-button {
    height: @icon-size;
    width: @icon-size;
    margin: @mejs-margin / 2;
  }

  .mejs-controls .mejs-button button {
    .icon;
    height: @icon-size;
    width: @icon-size;
    margin: 0;
    background: none;
  }

  // Current time pop float on time rail hover
  // --------------------------------------------------
  .mejs-controls .mejs-time-rail .mejs-time-float {
    top: -1.5rem;
    height: calc(~'@{mejs-time-float-size} + 2px');
    width: calc(~'@{mejs-time-float-width} + 2px');
    margin-left: -@mejs-time-float-width / 2;
    background: none;
    background-color: @white;
    color: @black;
    border-color: @black;
  }

  .mejs-controls .mejs-time-rail .mejs-time-float-current {
    height: @mejs-time-float-size;
    width: @mejs-time-float-width;
    margin: 0;
    font-size: @mejs-time-float-size;
    line-height: 1;
  }

  .mejs-controls .mejs-time-rail .mejs-time-float-corner {
    top: @mejs-time-float-width / 2;
    left: @mejs-time-float-width / 2;
    .transform(translate(-50%,-50%));
    border-color: @white transparent transparent transparent;
  }

  .mejs-controls .mejs-time-rail span {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }

  // Closed captions pop up selector
  // --------------------------------------------------
  .mejs-controls .mejs-captions-button .mejs-captions-selector {
    bottom: @mejs-controls-height - @mejs-margin;
    left: -@mejs-margin / 2;
    right: auto;
    width: 6rem;
    height: 6.5rem;
    padding: @mejs-margin;
    overflow-y: scroll;
    font-size: @mejs-cc-size;
    line-height: 1;
  }

  .mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: @mejs-margin / 2;
  }

  .mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
    margin: 0;
    float: none;
  }

  .mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
    float: none;
    width: auto;
    margin-left: @mejs-margin;
    padding: 0;
    font-size: @mejs-cc-size;
    line-height: 1;
  }

  // Closed captions
  // --------------------------------------------------
  .mejs-captions-layer {
    font-size: @body-size;
    line-height: @body-line-height;
    color: inherit;
  }

  .mejs-captions-position-hover {
    bottom: @mejs-controls-height + @mejs-time-rail-height;
  }

  .mejs-captions-text {
    padding: 0.25rem;
    background: none;
    background-color: @black;
    color: @white;
  }
}
