@import '@financial-times/o3-foundation/css/core.css';
.cp-clip__video-progress-bar {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  // Affects the clickable area of the progress bar
  padding-top: 20px;
  background: none;
  width: 100%;
  z-index: 2;
  user-select: none;
  -webkit-user-select: none;


  overflow-y: visible;
  .cp-clip__progress-main-bar {
    display: block;
    width: 100%;
    height: 3px;
    transition: margin 0.1s linear, height 0.1s linear;
    background-color: var(--o3-color-palette-ft-grey);
    
    @include oGridRespondTo(L) {
      height: 4px;
    }

    &.cp-clip__progress-enlarged {
      $progress-enlarged-height: 8px;
      height: $progress-enlarged-height;
      margin-top: -4px;

      .cp-clip__progress-cursor {
        transform: translate(-50%, calc(-50% - $progress-enlarged-height / 2));
        width: 18px;
        border-radius: 50%;
        height: 18px;
        display: block;
        position: absolute;
      }
      .cp-clip__progress-time {
        $progress-time-left-offset: -12px;
        $progress-time-height-offset: -22px;
        display: block;
        position: absolute;
        transform: translate($progress-time-left-offset, calc($progress-time-height-offset - 2px));
        color: var(--o3-color-palette-white);
        font-size: var(--o3-font-size-metric2-negative-1);
        font-family: var(--o3-font-family-metric);
        @include oGridRespondTo(L) {
          transform: translate($progress-time-left-offset, $progress-time-height-offset);
        }
      }
    }
    div {
      background-color: var(--o3-color-palette-teal-70);
      height: 100%;
    }
    .cp-clip__progress-ended {
      .cp-clip__progress-cursor,
      .cp-clip__progress-time {
        display: none;
      }
    }
    .cp-clip__progress-cursor {
      display: none;
    }
    .cp-clip__progress-time {
      display: none;
    }
    .cp-clip__progress-bar {
      padding: 0px;
      width: 0%; // render 0 progress by default
    }
  }
}

.cp-clip--playing {
  .cp-clip__video-progress-bar {
    pointer-events: auto;
  }
}