.p-video_controls_scrubber__track {
  background: $bg2;

  &:focus {
    box-shadow:
      0 0 0 1px $primary,
      0 0 0 5px $primaryT;
  }
}

.p-video_controls_scrubber__elapsed {
  background: $accent;

  &:after {
    background: $accent;
  }
}

.p-video_controls_overlay {
  color: $fg;
}

.p-video_controls_overlay--design_polish .p-video_controls_overlay__controls_container {
  background: none;
  border-radius: 8px;
  margin: 12px;
  padding: 4px;
  position: relative;
  transition: background 80ms cubic-bezier(0.36, 0.19, 0.29, 1);
  z-index: 1;
}

.p-video_controls_overlay--controls {
  &:before {
    background: linear-gradient(180deg, transparent, #000a 70%);
  }
}

.p-video_controls_overlay__button {
  &.c-button--focus-visible:focus {
    box-shadow:
      inset 0 0 0 1px $accent,
      inset 0 0 0 5px $accentT;
  }
}

.p-video_controls_overlay__controls__pill {
  background: $button;
}

.p-video_controls_overlay--active .p-video_controls_overlay__controls__pill,
.p-video_controls_overlay--controls:hover .p-video_controls_overlay__controls__pill {
  background: transparent;
}

.p-video_controls_overlay__controls__button {
  &.c-button--focus-visible:focus,
  &:hover {
    background: $hl;
  }
}

.p-video_controls_overlay__controls__button--disabled {
  color: $disabled;

  &.c-button--focus-visible:focus,
  &:hover {
    background: none;
  }
}

.p-video_controls_overlay__controls__speed {
  &:hover {
    background: $hl;
  }

  .c-select_button__icon,
  &:hover .c-select_button__icon {
    color: $primary;
  }
}

.p-video_controls_overlay__corner {
  .p-video_message_file__controls_overlay_ellipsis,
  .p-video_message_file__controls_overlay_fullscreen {
    background: $button;
  }

  .p-video_message_file__controls_overlay_ellipsis:hover,
  .p-video_message_file__controls_overlay_fullscreen:hover {
    background: $button;
  }
}

.p-video_message_file {
  .p-media_viewer__video_container {
    background: #000;
  }

  .p-media_viewer__video {
    &::cue {
      background-color: $bg;
    }
  }
}

.p-video_message_file__duration {
  background: $bg;
  color: $fg;
}

.p-video_controls_overlay--controls:hover .p-video_controls_overlay__controls_container {
  background: $contrast;
}

.p-video_controls_overlay__corner.p-video_controls_overlay__corner--embed {
  background: $contrast;
}

.p-video_controls_overlay__corner.p-video_controls_overlay__corner--embed:hover {
  background: $bg;
}

.p-video_controls_overlay__button.c-button--focus-visible:focus {
  box-shadow:
    inset 0 0 0 1px $primary,
    inset 0 0 0 5px $primaryT;
}

.p-video_controls_overlay__controls__button.c-button--focus-visible:focus,
.p-video_controls_overlay__controls__button:hover {
  background: $hl;
}

.p-video_controls_overlay__controls__speed:hover {
  background: $hl;
}

.p-video_controls_overlay__controls__speed .c-select_button__icon,
.p-video_controls_overlay__controls__speed:hover .c-select_button__icon {
  color: $selectFg;
}

.p-video_controls_overlay__corner .p-video_controls_overlay__start_thread_button,
.p-video_controls_overlay__corner .p-video_embed__controls_overlay_fullscreen,
.p-video_controls_overlay__corner .p-video_message_file__controls_overlay_ellipsis,
.p-video_controls_overlay__corner .p-video_message_file__controls_overlay_fullscreen {
  background: $button;
}

.p-video_controls_overlay__corner .p-video_controls_overlay__start_thread_button:hover,
.p-video_controls_overlay__corner .p-video_embed__controls_overlay_fullscreen:hover,
.p-video_controls_overlay__corner .p-video_message_file__controls_overlay_ellipsis:hover,
.p-video_controls_overlay__corner .p-video_message_file__controls_overlay_fullscreen:hover {
  background: $hl;
}

.p-video_controls_overlay__one_click_reactions {
  background: $button;
}

.p-video_controls_overlay__one_click_reactions:hover {
  background: $hl;
}

.p-video_controls_overlay__one_click_reactions .p-media_reactions_one_click_bar__button:hover {
  background: $hl;
}
