/**
 * The challenge here to support "playable queries" and "direction" at the same time and allow mixins like:
 *   @include query(max-width-550())
 *   @include query(max-width-550(), ltr())
 *   @include query(max-width-550(), rtl())
 */
.controlButton {
  display: flex;
  padding: 0;
  cursor: pointer;
  transition-duration: .2s;
  transition-property: opacity;
  opacity: 1;
  border: 0;
  border-radius: 0;
  outline: none;
  background-color: transparent;
  justify-content: center;
  align-items: center; }
  .controlButton:hover {
    opacity: .7; }

.hidden {
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important; }

.seekBlock {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
  user-select: none;
  transition: opacity .2s, visibility .2s;
  touch-action: none; }
  [data-playable-hook='player-container'][data-playable-in-full-screen="true"] .seekBlock {
    height: 8px; }
  .seekBlock.inLive .played {
    background-color: #ea492e; }
  .seekBlock.inLive .seekTo {
    background-color: rgba(234, 73, 46, 0.5); }
  .seekBlock.inLive .syncButton {
    display: initial; }
  .seekBlock:hover .progressBarsWrapper, .seekBlock.isDragging .progressBarsWrapper {
    transform: scaleY(1); }
    [data-playable-hook='player-container'][data-playable-in-full-screen="true"] .seekBlock:hover .progressBarsWrapper, [data-playable-hook='player-container'][data-playable-in-full-screen="true"] .seekBlock.isDragging .progressBarsWrapper {
      transform: scaleY(1); }
    .seekBlock:hover .progressBarsWrapper .seekTo, .seekBlock.isDragging .progressBarsWrapper .seekTo {
      opacity: 1; }
    .seekBlock:hover .progressBarsWrapper .timeIndicator:after, .seekBlock.isDragging .progressBarsWrapper .timeIndicator:after {
      transform: scale(1); }
  .seekBlock:hover .seekButton, .seekBlock.isDragging .seekButton {
    transform: scale(1); }
    .seekBlock:hover .seekButton.liveSync, .seekBlock.isDragging .seekButton.liveSync {
      left: 100%; }
  .seekBlock:hover .syncButton, .seekBlock.isDragging .syncButton {
    transform: scale(1.4); }
    [data-playable-hook='player-container'][data-playable-in-full-screen="true"] .seekBlock:hover .syncButton, [data-playable-hook='player-container'][data-playable-in-full-screen="true"] .seekBlock.isDragging .syncButton {
      transform: scale(1.33); }
    .seekBlock:hover .syncButton.liveSync, .seekBlock.isDragging .syncButton.liveSync {
      background-color: #fff; }

.seekButtonContainer {
  position: absolute;
  z-index: 7;
  top: -3px;
  left: -6px; }
  [data-playable-hook='player-container'][data-playable-in-full-screen="true"] .seekButtonContainer {
    top: -4px;
    left: -8px;
    width: 16px;
    height: 16px; }

.seekButton {
  display: block;
  width: 12px;
  height: 12px;
  content: '';
  cursor: pointer;
  transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
  transform: scale(0);
  border-radius: 50%;
  background-color: #fff; }
  [data-playable-hook='player-container'][data-playable-in-full-screen="true"] .seekButton {
    width: 16px;
    height: 16px; }

.syncButton {
  position: absolute;
  z-index: 6;
  top: -2px;
  right: -5px;
  display: none;
  width: 6px;
  height: 6px;
  cursor: pointer;
  transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
  border: 2px solid #bababa;
  border-radius: 50%;
  background-color: #ea492e; }
  [data-playable-hook='player-container'][data-playable-in-full-screen="true"] .syncButton {
    top: -2px;
    right: -6px;
    width: 8px;
    height: 8px; }
  .syncButton:hover {
    background-color: #fff; }
  .syncButton.hidden {
    display: none; }

.progressBarsWrapper {
  height: 6px;
  transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
  transform: scaleY(0.34); }
  [data-playable-hook='player-container'][data-playable-in-full-screen="true"] .progressBarsWrapper {
    height: 8px;
    transform: scaleY(0.25); }

.progressBar {
  position: absolute;
  height: 6px;
  padding: 0; }
  [data-playable-hook='player-container'][data-playable-in-full-screen="true"] .progressBar {
    height: 8px; }

.played {
  width: 100%;
  transform-origin: 0 0;
  background-color: #fff; }

.buffered {
  transition: width .2s ease;
  background-color: rgba(255, 255, 255, 0.25); }

.background {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.25); }

.seekTo {
  transition: opacity .2s;
  background-color: rgba(255, 255, 255, 0.5); }

.timeIndicators {
  position: absolute;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  background-color: transparent; }

.timeIndicator {
  position: absolute; }
  .timeIndicator:after {
    position: absolute;
    right: -3px;
    width: 6px;
    height: 6px;
    content: '';
    transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
    transform: scale(0);
    opacity: .6;
    border-radius: 50%;
    background-color: #fff; }
    [data-playable-hook='player-container'][data-playable-in-full-screen="true"] .timeIndicator:after {
      right: -4px;
      width: 8px;
      height: 8px; }
    .timeIndicator:after:hover {
      opacity: 1; }

.hitbox {
  position: relative;
  z-index: 5;
  top: -11px;
  display: block;
  width: 100%;
  height: 16px;
  cursor: pointer;
  opacity: 0; }

:global [data-playable-focus-source='key']
[data-playable-hook='progress-control'].focus-within,
:global [data-playable-focus-source='script']
[data-playable-hook='progress-control'].focus-within {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(56, 153, 236, 0.8); }