@use '../../../../shared/styles/variables' as *;

.timeline-zoom {
  position: sticky;
  top: 0;
  z-index: 50;

  padding: 10px 20px 20px 20px;

}

.timeline-zoom__track {
  position: relative;

  height: 28px;

  border-radius: 8px;
  background: $color-surface-active;

  overflow: visible;
}

.timeline-zoom__selection {
  position: absolute;
  top: 0;
  bottom: 0;

  min-width: 24px;

  border-radius: 8px;
  background: $color-primary-focus;
}

.timeline-zoom__window {
  position: absolute;
  inset: 0;

  border: none;
  background: $transparent;

  cursor: grab;
}

.timeline-zoom__window:active {
  cursor: grabbing;
}

.timeline-zoom__label--left {
  transform: translate(50%, -50%);
  &.out-place{
    transform: translate(-90%, -50%);
  }
}

.timeline-zoom__label--right {
  transform: translate(-150%, -50%);
  
  &.out-place{
    transform: translate(-5%, -50%);
  }
}

.timeline-zoom__handle {
  position: absolute;
  top: 2px;
  bottom: 2px;

  width: 6px;

  border: none;
  border-radius: 999px;

  background: $blue;

  cursor: ew-resize;
  z-index: 10;
}

.timeline-zoom__handle--left {
  left: 2px;
}

.timeline-zoom__handle--right {
  right: 2px;
}

.timeline-zoom__label {
  position: absolute;
  top: 50%;

  color: $gray50;
  font-size: $font-size-12;
  font-weight: 550;
  line-height: 1;

  pointer-events: none;
  white-space: nowrap;
  transition: transform .3s ease;
}

.timeline-zoom__label--left {
  margin-left: -12px;
}

.timeline-zoom__label--right {
  margin-left: 12px;
}
