////
/// @group classic-player-controls
////

/// Background color of the control bar.
$classic-player-controls-background-color: #191919 !default;

/// Color of the border around the control bar.
$classic-player-controls-border-color: #505050 !default;

/// Color of the vertical separator right from the play button.
$classic-player-controls-separator-color: $classic-player-controls-border-color !default;

/// Width of the border around control bar
$classic-player-controls-border-width: 3px !default;

/// Width of the border between play button and progress bar
$classic-player-controls-separator-border-width: 2px !default;

/// Font size of control bar text, current time and duration.
$classic-player-controls-font-size: 15px !default;

/// Color of control bar text, current time and duration.
$classic-player-controls-text-color: #ddd !default;

/// Backgrund color of the progress bar.
$classic-player-controls-progress-bar-background-color: #333333 !default;

/// Color of the part of the progress bar indicating the play progress.
$classic-player-controls-progress-bar-color: $main-color !default;

/// Color of the part of the progress bar indicating the load progress.
$classic-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.4) !default;

/// Border radius of the progress bar.
$classic-player-controls-progress-bar-border-radius: 4px !default;

/// Width of the handle element. Can be used to ensure correct
/// positioning of the handle when sprite images are used.
$classic-player-controls-handle-width: 24px !default;

/// Position of current time and duration.
///
/// - `"right"`: Both on the right separated by a slash.
///
/// - `"split"`: Left and right of the progress bar.
$classic-player-controls-timestamp-position: "left" !default;

%player_controls {
  &-control_bar {
    position: absolute;
    left: 50%;
    bottom: 100%;
    @include transform(translate3d(-50%, 0, 0));
    z-index: 2;

    display: block;
    width: 434px;
    height: 60px;

    background-color: $classic-player-controls-background-color;
    border: $classic-player-controls-border-width solid $classic-player-controls-border-color;
    pointer-events: all;

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 64px;
      width: 0;
      height: 60px;
      border-right: $classic-player-controls-separator-border-width solid $classic-player-controls-separator-color;
    }

    @include phone {
      left: 0;
      top: 50%;
      bottom: auto;
      margin-left: -4px;
      margin-top: -30px;
      @include transform(translate3d(0, 0, 0));
      width: 60px;
      max-width: 435px;
      height: 60px;

      background: none;
      border: none;
    }
  }

  &-control_bar_text {
    position: absolute;
    left: 80px;
    top: 20px;
    color: $classic-player-controls-text-color;

    @include phone {
      display: none;
    }
  }

  &-play_button,
  &-progress_bar,
  &-current_time,
  &-duration {
    position: relative;
    float: left;
    text-align: center;
    height: 3em;
    width: 4em;
  }

  &-play_button {
    width: 40px;
    height: 40px;
    margin-top: 10px;
    margin-left: 11px;
    cursor: pointer;

    &.pressed:focus {
      outline: none;
    }
  }

  &-skip_button {
    display: none;
  }

  &-progress_bar {
    position: absolute;
    top: 25px;
    width: auto;
    height: 9px;
    cursor: pointer;
  }

  &-progress_bar_inner {
    height: 100%;
    border-radius: $classic-player-controls-progress-bar-border-radius;
    background-color: $classic-player-controls-progress-bar-background-color;
  }

  &-play_progress,
  &-load_progress {
    border-radius: $classic-player-controls-progress-bar-border-radius;
    position: absolute;
    height: 100%;
  }

  &-play_progress {
    background: initial;
    background-color: $classic-player-controls-progress-bar-color;
  }

  &-load_progress {
    background-color: $classic-player-controls-progress-bar-load-progress-color;
  }

  &-progress_bar_handle {
    position: absolute;
    top: -15px;
    left: 0;
    height: 40px;
    width: $classic-player-controls-handle-width;

    &:before {
      content: "";
    }
  }

  &-current_time,
  &-time_separator,
  &-duration {
    position: relative;
    line-height: 3em;
    font-size: $classic-player-controls-font-size;
    margin-top: 7px;
    color: $classic-player-controls-text-color;
  }

  &-loading_spinner {
    position: absolute;
    top: 30px;
    left: 31px;
    opacity: 1;
    @include animation(rotate 1.5s infinite linear);

    svg {
      display: none;
    }
  }

  &-loading_spinner-on_underrun {
    // Override inline style set by video.js
    // scss-lint:disable ImportantRule
    display: block !important;
    // scss-lint:enable ImportantRule
  }

  @include phone {
    &-progress_bar,
    &-current_time,
    &-time_separator,
    &-duration,
    &-control_bar:before {
      display: none;
    }

    &-menu_bar {
      @include transition(opacity 0.2s linear, visibility 0.2s linear);
      position: fixed;
    }

    &-container-paused {
      %player_controls-menu_bar {
        opacity: 0;
        visibility: hidden;
        @include transition-delay(0.2s);
      }
    }
  }

  &-page-with_progress_bar {
    %player_controls-control_bar_text {
      display: none;
    }
  }
}

@import "./control_bar/timestamp_position/right";
@import "./control_bar/timestamp_position/split";

@if $classic-player-controls-timestamp-position == "split" {
  @include player-controls-classic-controls-bar-timestamps-position-split;
} @else {
  @include player-controls-classic-controls-bar-timestamps-position-right;
}