@import '../../shared';

$progress-bar-height: 6px;
$progress-bar-height-full-screen: 8px;

$seek-pointer-height: 12px;
$seek-pointer-width: 12px;

$seek-pointer-height-full-screen: 16px;
$seek-pointer-width-full-screen: 16px;

$sync-pointer-height: 6px;
$sync-pointer-width: 6px;
$sync-pointer-border: 2px;

$sync-pointer-height-full-screen: 8px;
$sync-pointer-width-full-screen: 8px;

$color-played: #fff;
$color-seek-to: rgba(255, 255, 255, .5);
$color-played-live: #ea492e;
$color-seek-to-live: rgba(234, 73, 46, .5);

$color-sync-pointer-border: #bababa;
$color-sync-pointer-background: #ea492e;

.seekBlock {
  position: relative;

  display: block;

  width: 100%;
  height: $progress-bar-height;

  user-select: none;
  transition: opacity .2s, visibility .2s;

  @include query(in-full-screen()) {
    height: $progress-bar-height-full-screen;
  }
  touch-action: none;

  &.inLive {
    .played {
      background-color: $color-played-live;
    }
    .seekTo {
      background-color: $color-seek-to-live;
    }
    .syncButton {
      display: initial;
    }
  }

  &:hover,
  &.isDragging {
    .progressBarsWrapper {
      transform: scaleY(1);

      @include query(in-full-screen()) {
        transform: scaleY(1);
      }
      .seekTo {
        opacity: 1;
      }
      .timeIndicator:after {
        transform: scale(1);
      }
    }

    .seekButton {
      transform: scale(1);

      &.liveSync {
        left: 100%;
      }
    }

    .syncButton {
      transform: scale(1.4);

      @include query(in-full-screen()) {
        transform: scale(1.33);
      }

      &.liveSync {
        background-color: $color-played;
      }
    }
  }
}

.seekButtonContainer {
  position: absolute;
  z-index: 7;
  top: -$seek-pointer-height / 4;
  left: -$seek-pointer-width / 2;

  @include query(in-full-screen()) {
    top: -$progress-bar-height-full-screen / 2;
    left: -$seek-pointer-width-full-screen / 2;

    width: $seek-pointer-width-full-screen;
    height: $seek-pointer-height-full-screen;
  }
}

.seekButton {
  display: block;

  width: $seek-pointer-width;
  height: $seek-pointer-height;

  content: '';
  cursor: pointer;
  transition: transform .1s cubic-bezier(0, 0, .2, 1);
  transform: scale(0);

  border-radius: 50%;
  background-color: #fff;

  @include query(in-full-screen()) {
    width: $seek-pointer-width-full-screen;
    height: $seek-pointer-height-full-screen;
  }
}

.syncButton {
  position: absolute;
  z-index: 6;
  top: -(
  $sync-pointer-height + 2 * $sync-pointer-border - $progress-bar-height
  ) / 2;
  right: -($sync-pointer-width + 2 * $sync-pointer-border) / 2;

  display: none;

  width: $sync-pointer-width;
  height: $sync-pointer-height;

  cursor: pointer;
  transition: transform .1s cubic-bezier(0, 0, .2, 1);

  border: $sync-pointer-border solid $color-sync-pointer-border;
  border-radius: 50%;
  background-color: $color-sync-pointer-background;

  @include query(in-full-screen()) {
    top: -$progress-bar-height-full-screen / 4;
    right: -($sync-pointer-width-full-screen + 2 * $sync-pointer-border) / 2;

    width: $sync-pointer-width-full-screen;
    height: $sync-pointer-height-full-screen;
  }

  &:hover {
    background-color: $color-played;
  }

  &.hidden {
    display: none;
  }
}

.progressBarsWrapper {
  height: $progress-bar-height;

  transition: transform .1s cubic-bezier(0, 0, .2, 1);
  transform: scaleY(.34);

  @include query(in-full-screen()) {
    height: $progress-bar-height-full-screen;

    transform: scaleY(.25);
  }
}

.progressBar {
  position: absolute;

  height: $progress-bar-height;
  padding: 0;

  @include query(in-full-screen()) {
    height: $progress-bar-height-full-screen;
  }
}

.played {
  width: 100%;

  transform-origin: 0 0;

  background-color: $color-played;
}

.buffered {
  transition: width .2s ease;

  background-color: transparentize(#fff, .75);
}

.background {
  width: 100%;

  background-color: transparentize(#fff, .75);
}

.seekTo {
  transition: opacity .2s;

  background-color: $color-seek-to;
}

.timeIndicators {
  position: absolute;

  overflow-x: hidden;

  width: 100%;
  height: 100%;

  background-color: transparent;
}

.timeIndicator {
  position: absolute;

  &:after {
    position: absolute;
    right: -$progress-bar-height / 2;

    width: $progress-bar-height;
    height: $progress-bar-height;

    content: '';
    transition: transform .1s cubic-bezier(0, 0, .2, 1);
    transform: scale(0);

    opacity: .6;
    border-radius: 50%;
    background-color: #fff;

    @include query(in-full-screen()) {
      right: -$progress-bar-height-full-screen / 2;

      width: $progress-bar-height-full-screen;
      height: $progress-bar-height-full-screen;
    }

    &: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,
  [data-playable-focus-source='script']
  [data-playable-hook='progress-control'].focus-within {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(56, 153, 236, .8);
  }
}