@use "components/progress";
@use "settings/controls";
@use "settings/sliders";
@use "settings/type";


.plyr__progress__buffer {
    -webkit-appearance: none; /* stylelint-disable-line */
    background: transparent;
    border: 0;
    border-radius: 100px;
    height: 3px;
    left: 0;
    margin-top: calc((#{sliders.$plyr-range-track-height} / 2) * -1);
    padding: 0;
    position: absolute;
    top: 50%;
  
    &::-webkit-progress-bar {
      background: transparent;
    }
  
    &::-webkit-progress-value {
      background: currentColor;
      border-radius: 100px;
      min-width: sliders.$plyr-range-track-height;
      transition: width 0.2s ease;
    }
  
    // Mozilla
    &::-moz-progress-bar {
      background: currentColor;
      border-radius: 100px;
      min-width: sliders.$plyr-range-track-height;
      transition: width 0.2s ease;
    }
  
    // Microsoft
    &::-ms-fill {
      border-radius: 100px;
      transition: width 0.2s ease;
    }
  }

.plyr__progress {
    position: absolute;
    left:  calc(#{controls.$plyr-control-spacing} * 2);
    margin-right: calc(#{controls.$plyr-control-spacing} * 2);
    bottom: calc(#{controls.$plyr-control-spacing} * 4);
    width: calc(100% - #{controls.$plyr-control-spacing} * 4);
  
    input[type='range'],
    &__buffer {
      margin-left: calc(#{progress.$plyr-progress-offset} * -0.5);
      margin-right: calc(#{progress.$plyr-progress-offset} * -0.5);
      width: calc(100% + #{progress.$plyr-progress-offset});
    }
  
    input[type='range'] {
      position: relative;
      z-index: 2;
    }
  
    // Seek tooltip to show time
    .plyr__tooltip {
      font-size: type.$plyr-font-size-time;
      left: 0;
    }
  }