// Map placeholder names to concrete vjs css class names.

$vjs-selector-mapping: (
  page-with_progress_bar: ".audio_page, .video_page",
  page-audio: ".audio_page",

  background: ".page_background-for_page_with_player_controls",

  background-idle: ".is_idle .page_background-for_page_with_player_controls",

  background-hover: ".is_control_bar_hovered .page_background-for_page_with_player_controls",
  background-focused: ".is_control_bar_focused .page_background-for_page_with_player_controls",

  // Use playing class that is removed with delay to prevent
  // mask image on scroller from being removed too early in slim
  // player controls.
  scroller-playing: ".video_page .scroller.is_playing_delayed, .audio_page .scroller.is_playing_delayed",

  // If video has played, content is faded immediately. This can be
  // used by the slim player controls to not display the scroller mask
  // if the content fades anyway.
  scroller-fading: ".video_page.has_played .scroller",

  container: ".controls",

  container-playing: ".controls.is_playing",
  container-paused: ".controls.is_paused",

  container-idle: ".is_idle .controls",

  container-hover: ".is_control_bar_hovered .controls",
  container-focused: ".is_control_bar_focused .controls",

  container-video: ".video_page .controls",
  container-fading: ".video_page .controls",

  container-unplayed: ".unplayed .controls",

  info_box: ".add_info_box",
  info_box-hidden_during_playback: ".add_info_box-hidden_during_playback",
  control_bar: ".vjs-control-bar",
  control_bar_text: ".control_bar_text",

  play_button: ".vjs-play-control",
  play_button-playing: ".vjs-play-control.vjs-playing",
  play_button-custom_icon: ".player_controls-play_button-custom_icon",
  skip_button: ".player_skip",
  loading_spinner: ".vjs-loading-spinner",
  loading_spinner-on_underrun: ".vjs-loading-spinner.showing-for-underrun",

  progress: ".player_controls-progress",

  current_time: ".vjs-current-time",
  time_separator: ".vjs-time-divider",
  duration: ".vjs-duration",

  progress_bar: ".vjs-progress-control",
  progress_bar_inner: ".vjs-progress-holder",
  progress_bar_handle: ".vjs-seek-handle",
  load_progress: ".vjs-load-progress",
  play_progress: ".vjs-play-progress",

  menu_bar: ".player_controls-menu_bar",

  close_button: ".page .close_button",
  close_button_label: ".page .close_button .label",
);

@each $suffix, $selector in $vjs-selector-mapping {
  #{$selector} {
    @extend %player_controls-#{$suffix};
  }
}

.vjs-control-text {
  @include hide_text;
}

.vjs-remaining-time,
.vjs-fullscreen-control,
.vjs-volume-control,
.vjs-mute-control,
.vjs-menu-button,
.player_fullscreen,
.player_volume {
  display: none;
}
